使用javascript在html中添加项目到下拉列表中

我有这个javascript + html来填充下拉菜单，但它不工作，我是否做错了什么？注意：我想在下拉菜单来填充在页面加载使用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>

来源

2013-08-24 Oyindamola ' Funmi Oni

可能重复的[如何添加一个选项到javascript表单下拉列表]（http://stackoverflow.com/questions/10992261/how-do-我添加一个选项到一个HTML格式下拉列表与JavaScript） –

@HashemQolami我没有一个按钮，因此我很困惑放在哪里把功能。 –

因为你的脚本是<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()">

来源

2013-08-24 09:50:24 Kabie

我想你只定义了这个函数。你不会在任何地方触发它。

请不要

window.onload = addList();

或触发它的一些其他事件

其定义后

看到这个fiddle

来源

2013-08-24 09:51:46 mithunsatheesh

试试这个：

select.appendChild（选项）;

来源

2013-08-24 09:54:37 Alex

试试这个

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

值将追加到下拉列表中。

来源

2014-02-06 10:59:17 Golda

对于更高的性能，我建议这样的：

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

不过，我不会在所有使用这些种类的方法。
看起来很粗糙。你最好用文档碎片做这件事：

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

来源

2015-03-11 13:53:42

如果我只想替换值而不是追加值，那么如何？我会怎么做？ – Eli

使用javascript在html中添加项目到下拉列表中

回答

相关问题