如何使用jQuery向DropDownList添加选项？

本文翻译自：How do I add options to a DropDownList using jQuery?

As the question says, how do I add a new option to a DropDownList using jQuery? 正如问题所说，如何使用jQuery向DropDownList添加新选项？

Thanks 谢谢

---

#1楼

参考：https://stackoom.com/question/1KUR/如何使用jQuery向DropDownList添加选项

---

#2楼

With no plug-ins, this can be easier without using as much jQuery, instead going slightly more old-school: 没有插件，如果不使用尽可能多的jQuery，这可以更容易，而不是更老的学校：

var myOptions = {
    val1 : 'text1',
    val2 : 'text2'
};
$.each(myOptions, function(val, text) {
    $('#mySelect').append( new Option(text,val) );
});

If you want to specify whether or not the option a) is the default selected value, and b) should be selected now, you can pass in two more parameters: 如果要指定选项a）是否为默认选择值，并且b）现在应该选择，则可以传入另外两个参数：

    var defaultSelected = false;
    var nowSelected     = true;
    $('#mySelect').append( new Option(text,val,defaultSelected,nowSelected) );

---

#3楼

using jquery you can use 使用jquery你可以使用

      this.$('select#myid').append('<option>newvalue</option>');

where " myid " is the id of the dropdown list and newvalue is the text that you want to insert.. 其中“ myid ”是下拉列表的id ， newvalue是您要插入的文本。

---

#4楼

I needed to add as many options to dropdowns as there were dropdowns on my page. 我需要在下拉列表中添加尽可能多的选项，因为我的页面上有下拉列表。 So I used it in this way: 所以我用这种方式使用它：

function myAppender(obj, value, text){
    obj.append($('<option></option>').val(value).html(text));
}

$(document).ready(function() {
    var counter = 0;
    var builder = 0;
    // Get the number of dropdowns
    $('[id*="ddlPosition_"]').each(function() {
        counter++;
    });

    // Add the options for each dropdown
    $('[id*="ddlPosition_"]').each(function() {
        var myId = this.id.split('_')[1];

        // Add each option in a loop for the specific dropdown we are on
        for (var i=0; i<counter; i++) {
            myAppender($('[id*="ddlPosition_'+myId+'"]'), i, i+1);
        }
        $('[id*="ddlPosition_'+myId+'"]').val(builder);
        builder++;
    });
});

This dynamically set up dropdowns with values like 1 to n, and automatically selected the value for the order that dropdown was in (ie 2nd dropdown got "2" in the box, etc.). 这会动态设置下拉列表，其值为1到n，并自动选择下拉列表的值（即第二个下拉列表中的“2”，等等）。

It was ridiculous that I could not use this or this.Object or $.obj or anything like that in my 2nd .each() , though --- I actually had to get the specific ID of that object and then grab and pass that whole object to my function before it would append. 很this.Object我无法在我的第二个.each()使用this或this.Object或$.obj或类似的东西，但是 - 我实际上必须得到该对象的特定ID然后抓住并传递在它附加之前将整个对象添加到我的函数中。 Fortunately the ID of my dropdown was separated by a "_" and I could grab it. 幸运的是，我的下拉列表的ID由“_”分隔，我可以抓住它。 I don't feel I should have had to, but it kept giving me jQuery exceptions otherwise. 我不觉得我应该这样做，但它不断给我jQuery例外。 Something others struggling with what I was might enjoy knowing. 其他人与我所挣扎的事情可能会让人知道。

---

#5楼

Add item to list in the begining 在开头添加项目到列表

$("#ddlList").prepend('<option selected="selected" value="0"> Select </option>');

Add item to list in the end 最后将项目添加到列表中

$('<option value="6">Java Script</option>').appendTo("#ddlList");

Common Dropdown operation (Get, Set, Add, Remove) using jQuery 使用jQuery进行常见下拉操作（获取，设置，添加，删除）

---

#6楼

With the plugin: jQuery Selection Box . 使用插件： jQuery Selection Box 。 You can do this: 你可以这样做：

var myOptions = {
        "Value 1" : "Text 1",
        "Value 2" : "Text 2",
        "Value 3" : "Text 3"
    }
    $("#myselect2").addOption(myOptions, false);