Добавить элемент в раскрывающийся список в html с помощью javascript
У меня есть этот javascript + html для заполнения раскрывающегося меню, но он не работает, я делаю что-то неправильно? Примечание. Я хочу, чтобы выпадающее меню было заполнено на странице Загрузить
<!DOCTYPE html>
<html>
<head>
<script>
function addList(){
var select = document.getElementById("year");
for(var i = 2011; i >= 1900; --i) {
var option = document.createElement('option');
option.text = option.value = i;
select.add(option, 0);
}
}
</script>
</head>
<body>
<select id="year" name="year"></select>
</body>
</html>
Ответы
Ответ 1
Поскольку ваш script находится в <head>
, вам нужно обернуть его в window.onload
:
window.onload = function () {
var select = document.getElementById("year");
for(var i = 2011; i >= 1900; --i) {
var option = document.createElement('option');
option.text = option.value = i;
select.add(option, 0);
}
};
Вы также можете сделать это таким образом
<body onload="addList()">
Ответ 2
Для повышения производительности я рекомендую следующее:
var select = document.getElementById("year");
var options = [];
var option = document.createElement('option');
//for (var i = 2011; i >= 1900; --i)
for (var i = 1900; i < 2012; ++i)
{
//var data = '<option value="' + escapeHTML(i) +'">" + escapeHTML(i) + "</option>';
option.text = option.value = i;
options.push(option.outerHTML);
}
select.insertAdjacentHTML('beforeEnd', options.join('\n'));
Это позволяет избежать перерисовывания после каждого appendChild, что значительно ускоряет процесс, особенно для большего количества параметров.
Необязательно для генерации строки вручную:
function escapeHTML(str)
{
var div = document.createElement('div');
var text = document.createTextNode(str);
div.appendChild(text);
return div.innerHTML;
}
Однако, я бы не использовал такие методы вообще.
Это кажется грубым. Лучше всего это сделать с помощью documentFragment:
var docfrag = document.createDocumentFragment();
for (var i = 1900; i < 2012; ++i)
{
docfrag.appendChild(new Option(i, i));
}
var select = document.getElementById("year");
select.appendChild(docfrag);
Ответ 3
Попробуйте это
<script type="text/javascript">
function AddItem()
{
// Create an Option object
var opt = document.createElement("option");
// Assign text and value to Option object
opt.text = "New Value";
opt.value = "New Value";
// Add an Option object to Drop Down List Box
document.getElementById('<%=DropDownList.ClientID%>').options.add(opt);
}
<script />
Значение добавится в раскрывающийся список.
Ответ 4
Я думаю, что вы только определили функцию. вы не запускаете его нигде.
сделайте
window.onload = addList();
или вызвать его на другом событии
после определения
см. это fiddle
Ответ 5
Попробуйте использовать метод appendChild:
select.appendChild(option);