使用 JavaScript 将项目添加到 HTML 中的下拉列表答案

【问题标题】：Add item to dropdown list in HTML using JavaScript使用 JavaScript 将项目添加到 HTML 中的下拉列表
【发布时间】：2013-08-24 09:38:56
【问题描述】：

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

【问题讨论】：

how do I add an option to a html form dropdown list with javascript 的可能重复项
@HashemQolami 我没有按钮，因此我对在哪里放置函数感到困惑。

标签： javascript html

【解决方案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()">

【讨论】：

【解决方案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 />

值将附加到下拉列表中。

【讨论】：

这确实有效！其他例子没有。谢谢！（这里实现：） if ($("#MainContent_ddlFilterFieldKey").val() == "Date Time") {// 创建一个Option对象 var opt = document.createElement("option"); // 将文本和值赋给 Option 对象 opt.text = "New Value"; opt.value = "新值"; // 添加一个 Option 对象到下拉列表框 document.getElementById('MainContent_ddlFilterBooleanOption').options.add(opt); }

【解决方案4】：

尝试使用appendChild方法：

select.appendChild(option);

【讨论】：

【解决方案5】：

我认为你只定义了函数。你不会在任何地方触发它。

请做

window.onload = addList();

或在其他事件上触发它

在定义之后

看到这个fiddle

【讨论】：