создать уникальный идентификатор с помощью JavaScript - PullRequest
45 голосов
/ 12 июля 2010

У меня есть форма, где пользователь может добавить несколько полей выбора для нескольких городов. Проблема заключается в том, что каждый вновь созданный блок выбора должен иметь уникальный идентификатор. Можно ли это сделать с помощью JavaScript?

ОБНОВЛЕНИЕ: здесь часть формы для выбора городов. Также обратите внимание, что я использую 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/>"
     );
});

Ответы [ 19 ]

37 голосов
/ 12 июля 2010

другой способ использовать миллисекундный таймер:

var uniq = 'id' + (new Date()).getTime();
32 голосов
/ 07 ноября 2013
var id = "id" + Math.random().toString(16).slice(2)
20 голосов
/ 12 июля 2010

не могли бы вы просто сохранить рабочий индекс?

var _selectIndex = 0;

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

EDIT

При дальнейшем рассмотрении вы можете предпочесть использовать имена в стиле массива для выбора ...

1010 *, например *

<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;
19 голосов
/ 24 мая 2012
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);
}
11 голосов
/ 05 февраля 2013

Очень короткая функция даст вам уникальный идентификатор:

var uid = (function(){var id=0;return function(){if(arguments[0]===0)id=0;return id++;}})();

alert (uid ());

10 голосов
/ 08 ноября 2011

В ответ на @scott: Иногда JS очень быстро ... так что ...

var uniqueId = null,
    getUniqueName = function(prefix) {
        if (!uniqueId) uniqueId = (new Date()).getTime();
        return (prefix || 'id') + (uniqueId++);
    };
6 голосов
/ 09 декабря 2015

Я работаю над проблемой, аналогичной OP, и обнаружил, что элементы решений @Guy и @Scott можно объединить, чтобы создать решение, более надежное IMO.Результирующий уникальный идентификатор имеет три раздела, разделенных подчеркиванием:

  1. Начальная буква;
  2. Метка времени, отображаемая в базе 36;
  3. И последний случайный раздел.

Это решение должно работать очень хорошо, даже для очень больших наборов:

function uniqueId () {
    // desired length of Id
    var idStrLen = 32;
    // always start with a letter -- base 36 makes for a nice shortcut
    var idStr = (Math.floor((Math.random() * 25)) + 10).toString(36) + "_";
    // add a timestamp in milliseconds (base 36 again) as the base
    idStr += (new Date()).getTime().toString(36) + "_";
    // similar to above, complete the Id using random, alphanumeric characters
    do {
        idStr += (Math.floor((Math.random() * 35))).toString(36);
    } while (idStr.length < idStrLen);

    return (idStr);
}
6 голосов
/ 17 июля 2013

поместите в ваше пространство имен экземпляр, похожий на следующий

var myns = {/*.....*/};
myns.uid = new function () {
    var u = 0;
    this.toString = function () {
        return 'myID_' + u++;
    };
};
console.dir([myns.uid, myns.uid, myns.uid]);
2 голосов
/ 08 марта 2017

Чтобы избежать создания каких-либо счетчиков и быть уверенным, что идентификатор является уникальным, даже если на странице есть другие компоненты, которые создают элементы с идентификаторами, вы можете использовать случайное число и исправить его, если оно недостаточно (но вы также необходимо установить идентификатор немедленно, чтобы избежать конфликтов):

var id = "item"+(new Date()).getMilliseconds()+Math.floor(Math.random()*1000);
 // or use any random number generator
 // whatever prefix can be used instead of "item"
while(document.getElementById(id))
    id += 1;
//# set id right here so that no element can get that id between the check and setting it
2 голосов
/ 02 ноября 2018
const uid = function(){
    return Date.now().toString(36) + Math.random().toString(36).substr(2);
}

Эта функция генерирует уникальные идентификаторы, отсортированные по сгенерированной дате.Также может использоваться для идентификаторов в базах данных.

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...