使用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中添加項目到下拉列表中

回答

相關問題