如何使用 JavaScript 创建唯一 ID？

Question

我有一个表单，用户可以在其中为多个城市添加多个选择框。问题是每个新生成的选择框都需要有一个唯一的 id。能做到这一点的是JavaScript吗？

这是选择城市的表格部分。 Also note that I’m using some PHP to fill in the cities when a specific state is selected.

<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/>"
     );
});

原文由 JamesTBennett 发布，翻译遵循 CC BY-SA 4.0 许可协议

Answer 1

你能不能只保持一个运行索引？

 var _selectIndex = 0;

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

编辑

经过进一步考虑，您实际上可能更喜欢为您的选择使用数组样式的名称……

例如

<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;

原文由 Jonathan Fingland 发布，翻译遵循 CC BY-SA 2.5 许可协议

Answer 2

var id = "id" + Math.random().toString(16).slice(2)

原文由 Fabio Montefuscolo 发布，翻译遵循 CC BY-SA 3.0 许可协议