使用javascript创建唯一ID

IT技术 javascript html select dynamic
2021-02-20 18:59:10

我有一个表单，用户可以在其中为多个城市添加多个选择框。问题是每个新生成的选择框都需要有一个唯一的 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/>"
     );
});
6个回答
var id = "id" + Math.random().toString(16).slice(2)
虽然遥远，但碰撞的概率不为零
2021-05-08 18:59:10

使用毫秒计时器的另一种方式：

var uniq = 'id' + (new Date()).getTime();
在这种情况下，您最好使用performance.now()：performance.now() === performance.now() === false
2021-04-24 18:59:10
似乎不是一个好主意 (+new Date + +new Date )/2 === +new Date;
2021-04-26 18:59:10
如果用户在不同的国家/地区创建 ID，会发生什么情况？\
2021-05-07 18:59:10
@UlysseBN 刚刚尝试过performance.now()，尽管具有超高分辨率，但它并不能像您在我的机器上描述的那样工作。
2021-05-10 18:59:10
如果您一个接一个地创建 2 个 id，它将不是唯一的。 var first = (new Date()).getTime(); var second = (new Date()).getTime(); console.log(first == second);
2021-05-14 18:59:10 
const uid = function(){
    return Date.now().toString(36) + Math.random().toString(36).substr(2);
}

此函数生成非常独特的 ID，按其生成日期排序。也可用于数据库中的 ID。

请注意它可以有不同的长度
2021-05-03 18:59:10
又短又甜！
2021-05-15 18:59:10

你不能只保留一个正在运行的索引吗？

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;
如何将 <option></option> 标签插入到选择中？
2021-05-10 18:59:10
请注意，使用运行计数器可能会导致页面点击之间极有可能发生冲突。换句话说，如果每次页面加载时计数器从 1 开始，那么您下次编辑/更新对象时很可能会发生冲突。很高兴记住这一点。
2021-05-14 18:59:10 
function uniqueid(){
    // always start with a letter (for DOM friendlyness)
    var idstr=String.fromCharCode(Math.floor((Math.random()*25)+65));
    do {                
        // between numbers and characters (48 is 0 and 90 is Z (42-48 = 90)
        var ascicode=Math.floor((Math.random()*42)+48);
        if (ascicode<58 || ascicode>64){
            // exclude all chars between : (58) and @ (64)
            idstr+=String.fromCharCode(ascicode);    
        }                
    } while (idstr.length<32);

    return (idstr);
}
使用此示例生成相同 ID 的可能性有多大？似乎有可能，但极不可能。
2021-04-28 18:59:10
为了OP的利益，您可能想解释您的答案
2021-05-12 18:59:10
考虑到 javascript 中的 RNG 很糟糕，它比你想象的更有可能。
2021-05-21 18:59:10
为了笑我决定看看它的可能性有多大： var meh=fun();while(meh !== fun()){ console.log('.'); 在 Chrome 的命令行中......到目前为止，它是一百万，没有重复，在大多数情况下，你可以拥有这已经足够了。我猜应该有 32 个字符的长度。
2021-05-21 18:59:10
此函数有机会生成相同的 id，但为 dom“友好度”+1
2021-05-21 18:59:10
其它你可能感兴趣的问题
上一篇从下拉框中获取文本 下一篇javascript正则表达式iso日期时间