1. ホーム
  2. javascript

[解決済み] javascriptでユニークなIDを作成する

2023-03-27 15:58:55

質問

ユーザーが複数の都市について複数のセレクトボックスを追加できるフォームがあります。問題は、新しく生成された各セレクトボックスが一意のIDを持つ必要があることです。これはJavaScriptで行うことができますか?

UPDATE: ここに都市を選択するためのフォームの部分があります。また、特定の州が選択されたときに都市を埋めるためにいくつかのPHPを使用していることに注意してください。

<form id="form" name="form" method="post" action="citySelect.php">
<select id="state" name="state" onchange="getCity()">
    <option></option>
    <option value="1">cali</option>
    <option value="2">arizona</option>
    <option value="3">texas</option>
</select>
<select id="city" name="city" style="width:100px">

</select>

    <br/>
</form>

以下はjavascriptです。

$("#bt").click(function() {

$("#form").append(
       "<select id='state' name='state' onchange='getCity()'>
           <option></option>
           <option value='1'>cali</option>
           <option value='2'>arizona</option>
           <option value='3'>texas</option>
        </select>
        <select id='city' name='city' style='width:100px'></select><br/>"
     );
});

どのように解決するのですか?

実行中のインデックスを維持することはできないのでしょうか?

var _selectIndex = 0;

...code...
var newSelectBox = document.createElement("select");
newSelectBox.setAttribute("id","select-"+_selectIndex++);

EDIT

さらに検討した結果、selectsに配列スタイルの名前を使用する方が実際に好ましいかもしれません...。

<select name="city[]"><option ..../></select>
<select name="city[]"><option ..../></select>
<select name="city[]"><option ..../></select>

で、サーバーサイドでphpなどで

$cities = $_POST['city']; //array of option values from selects

編集2 OPコメントに対して

DOMメソッドによるオプションの動的な生成は、以下のように行うことができます。

var newSelectBox = document.createElement("select");
newSelectBox.setAttribute("id","select-"+_selectIndex++);

var city = null,city_opt=null;
for (var i=0, len=cities.length; i< len; i++) {
    city = cities[i];
    var city_opt = document.createElement("option");
    city_opt.setAttribute("value",city);
    city_opt.appendChild(document.createTextNode(city));
    newSelectBox.appendChild(city_opt);
}
document.getElementById("example_element").appendChild(newSelectBox);

と仮定して cities の配列が既に存在すると仮定します。

あるいは、innerHTMLメソッドを使うこともできる......。

var newSelectBox = document.createElement("select");
newSelectBox.setAttribute("id","select-"+_selectIndex++);
document.getElementById("example_element").appendChild(newSelectBox);

var city = null,htmlStr="";
for (var i=0, len=cities.length; i< len; i++) {
    city = cities[i];
    htmlStr += "<option value='" + city + "'>" + city + "</option>";
}
newSelectBox.innerHTML = htmlStr;