У меня есть форма, где пользователь может добавить несколько избранных полей для нескольких городов. Проблема состоит в том, что каждое недавно сгенерированное избранное поле должно иметь уникальный идентификатор. Это может быть сделано, 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/>"
);
});
не могли бы вы просто хранить бегущий индекс?
var _selectIndex = 0;
...code...
var newSelectBox = document.createElement("select");
newSelectBox.setAttribute("id","select-"+_selectIndex++);
EDIT
После дальнейшего рассмотрения вы можете предпочесть использовать имена в стиле массива для ваших селектов...
например,
<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
EDIT 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;
Как и другие говорили, вы можете использовать текущий индекс, или, если вам не нравится идея использования переменной, просто вытащите идентификатор последнего города в списке и добавьте 1 к его идентификатору. .
Другой способ - использовать миллисекундный таймер:
var uniq = 'id' + (new Date()).getTime();