Question

我有这个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>

Answer 1

由于您的脚本位于<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()">

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

Answer 3

尝试使用appendChild方法：

select.appendChild(option);

Answer 4

试试这个

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

该值将附加到下拉列表中。

Answer 5

我认为你只定义了这个功能。你没有在任何地方触发它。

请做

window.onload = addList();

或在其他事件上触发

定义后

请参阅此fiddle

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

5 个答案: