Question

正如问题所说，如何使用jQuery向DropDownList添加新选项？

由于

Answer 1

不使用任何额外的插件，

var myOptions = {
    val1 : 'text1',
    val2 : 'text2'
};
var mySelect = $('#mySelect');
$.each(myOptions, function(val, text) {
    mySelect.append(
        $('<option></option>').val(val).html(text)
    );
});

如果您有很多选项，或者需要非常频繁地运行此代码，那么您应该考虑使用DocumentFragment而不是不必要地多次修改DOM。对于少数选项，我会说它不值得。

-------------------------------已添加--------------- -----------------

DocumentFragment是提高速度的好选择，但我们无法使用document.createElement('option')创建选项元素，因为IE6和IE7不支持它。

我们可以做的是，创建一个新的select元素，然后附加所有选项。一旦循环完成，将其附加到实际的DOM对象。

var myOptions = {
    val1 : 'text1',
    val2 : 'text2'
};
var _select = $('<select>');
$.each(myOptions, function(val, text) {
    _select.append(
            $('<option></option>').val(val).html(text)
        );
});
$('#mySelect').append(_select.html());

这样我们只会修改DOM一次！

Answer 2

没有插件，如果不使用尽可能多的jQuery，这可以更容易，而不是稍微更老一点：

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

如果要指定选项a）是否为默认选择值，并且b）现在应该选择，则可以传入另外两个参数：

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

Answer 3

使用插件：jQuery Selection Box。你可以这样做：

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

Answer 4

您可能需要先清除DropDown $（ '＃DropDownQuality'）空（）;

我让MVC中的控制器返回一个只有一个项目的选择列表。

$('#DropDownQuality').append( $('<option></option>').val(data[0].Value).html(data[0].Text));

Answer 5

在开头

中添加项目到列表

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

在最后添加项目到列表

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

Common Dropdown operation (Get, Set, Add, Remove) using jQuery

Answer 6

Pease note @ Phrogz的解决方案在IE 8中不起作用，而@ nickf适用于所有主流浏览器。另一种方法是：

$.each(myOptions, function(val, text) {
    $("#mySelect").append($("&lt;option/&gt;").attr("value", val).text(text));
});

Answer 7

你可以直接使用

$"(.ddlClassName").Html("<option selected=\"selected\" value=\"1\">1</option><option value=\"2\">2</option>")

- ＆GT;在这里你可以使用直接字符串

Answer 8

此外，使用.prepend（）将选项添加到选项列表的开头。 http://api.jquery.com/prepend/

Answer 9

使用jquery你可以使用

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

其中＆＃34; myid ＆＃34;是下拉列表的 id ， newvalue 是您要插入的文字..

Answer 10

我需要在下拉列表中添加尽可能多的选项，因为我的页面上有下拉列表。所以我用这种方式使用它：

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++;
    });
});

这会动态设置下拉列表，其值为1到n，并自动选择下拉列表的值（即第二个下拉列表中的“2”等）。

在我的第二个this中，我无法使用this.Object或$.obj或.each()或其他类似内容，这是荒谬的，但实际上我必须得到该对象的特定ID然后在它追加之前抓取并将整个对象传递给我的函数。幸运的是，我的下拉列表的ID由“_”分隔，我可以抓住它。我不觉得我应该这样做，但它不断给我jQuery例外。其他人与我所挣扎的事情可能会让人知道。

Answer 11

让我们以为您的答复是“ successData”。它包含一个列表，您需要将其添加为下拉菜单中的选项。

success: function (successData) {
var sizeOfData = successData.length;
if (sizeOfData == 0) {
    //    NO DATA, throw an alert ...
    alert ("No Data Found");
} else {
    $.each(successData, function(val, text) {
        mySelect.append(
            $('<option></option>').val(val).html(text)
        );
    });
} }

这对您有用....

Answer 12

尝试此功能：

function addtoselect(param,value){
    $('#mySelectBox').append('&lt;option value='+value+'&gt;'+param+'&lt;/option&gt;');
}

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

12 个答案: