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

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 不支持它。

我们可以做的是，创建一个新的选择元素，然后附加所有选项。循环完成后，将其附加到实际的 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 选择框。你可以这样做：

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

Answer 4

您可能需要先清除 DropDown $('#DropDownQuality').empty();

我让 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");

使用 jQuery 的常见下拉操作（获取、设置、添加、删除）

Answer 6

请注意@Phrogz 的解决方案不适用于 IE 8，而 @nickf 的解决方案适用于所有主要浏览器。另一种方法是：

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

Answer 7

你可以直接使用

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

-> 这里你可以使用直接字符串

Answer 8

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

Answer 9

使用 jquery 你可以使用

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

其中“ myid ”是下拉列表的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”等）。

我不能在我的 2nd 中使用thisor this.Objector $.objor 类似的东西，这太荒谬了.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('<option value='+value+'>'+param+'</option>');
}