如何在jQuery中添加选项以选择列表答案

【问题标题】：How to add option to select list in jQuery如何在jQuery中添加选项以选择列表
【发布时间】：2010-12-16 08:47:24
【问题描述】：

我的选择列表名为dropListBuilding。以下代码似乎不起作用：

 for (var i = 0; i < buildings.length; i++) {
     var val = buildings[i];
     var text = buildings[i];
     alert("value of builing at: " + i.toString() + " is: " + val);
     $("#dropListBuilding").addOption(val, text, false);
 }

这条线消失了：

$("#dropListBuilding").addOption(val, text, false);

在 jQuery 中向下拉列表中添加项目的权利是什么？我已经在没有那条线的情况下进行了测试，并且 building 变量确实有我的数据元素。

【问题讨论】：

在stackoverflow.com/a/9995132/740639查看我的回答

标签： jquery html-select

【解决方案1】：

不要让您的代码如此复杂。它可以通过使用类似 foreach 的迭代器简单地完成如下：

$.each(buildings, function (index, value) {
    $('#dropListBuilding').append($('<option/>', { 
        value: value,
        text : value 
    }));
});

【讨论】：

我要添加的唯一内容是您希望在填充列表之前清除列表的情况。 $('#dropListBuilding').html(''); 在我看来，这完成了答案。
@ShirleyCC 仅在用户正在寻找的情况下。他们很可能正在寻找与文本本身相同的值。
我还要补充一点，您应该将对象放在循环外的 var 中，这样 jquery 就不必每次迭代都在 dom 中找到它。
如何添加选中的选项？

【解决方案2】：

$('#dropListBuilding').append('<option>'+val+'</option>');

【讨论】：

已经添加了不添加？如何？（我有一张幻灯片 1，幻灯片 2，返回并重复）

【解决方案3】：

这样做一直对我有用，我希望这会有所帮助。

var ddl = $("#dropListBuilding");   
for (k = 0; k < buildings.length; k++)
   ddl.append("<option value='" + buildings[k]+ "'>" + buildings[k] + "</option>");

【讨论】：

【解决方案4】：

您的代码失败，因为您在 jQuery 对象上执行方法 (addOption)（并且此对象不支持该方法）

您可以像这样使用标准的 Javascript 函数：

$("#dropListBuilding")[0].options.add( new Option("My Text","My Value") )

【讨论】：

你能给我指出这个方法的参考吗？我没想到有这样的东西存在，我以为 DOM 方法是.options.add(
Bob 你是对的，我已经修改了代码以使用普通的 JS 方式添加选项

【解决方案5】：

$.each(data,function(index,itemData){
    $('#dropListBuilding').append($("<option></option>")
        .attr("value",key)
        .text(value)); 
});

【讨论】：

希望它能解决问题，但请添加对代码的解释，以便用户完全理解他/她真正想要的。

【解决方案6】：

看起来你想要这个插件，因为它遵循你现有的代码，也许插件 js 文件在某个地方被遗漏了。

http://www.texotela.co.uk/code/jquery/select/

var myOptions = {
"Value 1" : "Text 1",
"Value 2" : "Text 2",
"Value 3" : "Text 3"
} 
$("#myselect2").addOption(myOptions, false); 
// use true if you want to select the added options » Run

【讨论】：

【解决方案7】：

这很好用，试试这个。

var ob = $("#myListBox");

for (var i = 0; i < buildings.length; i++) {
     var val = buildings[i];
     var text = buildings[i];

     ob.prepend("<option value="+ val +">" + text + "</option>");
}

【讨论】：

【解决方案8】：

如果您不想依赖 jQuery 的 3.5 kB 插件，或者不想在转义保留的 HTML 字符时构造 HTML 字符串，这里有一个简单的方法：

function addOptionToSelectBox(selectBox, optionId, optionText, selectIt)
{
    var option = document.createElement("option");
    option.value = optionId;
    option.text = optionText;
    selectBox.options[selectBox.options.length] = option;
    if (selectIt) {
        option.selected = true;
    }
}

var selectBox = $('#veryImportantSelectBox')[0];
addOptionToSelectBox(selectBox, "ID1", "Option 1", true);

【讨论】：

【解决方案9】：

对我来说这个很有效

success: function(data){
            alert("SUCCCESS");
            $.each(data,function(index,itemData){
                console.log(JSON.stringify(itemData));
                $("#fromDay").append( new Option(itemData.lookupLabel,itemData.id) )
            });
        }

【讨论】：