使用jQuery向下拉列表中添加选项的最简单方法是什么?

这行吗?

$("#mySelect").append('<option value=1>My option</option>');

当前回答

$(function () {
     var option = $("<option></option>");
     option.text("Display text");
     option.val("1");
     $("#Select1").append(option);
});

如果您从某个对象获取数据,那么只需将该对象转发到函数。。。

$(function (product) {
     var option = $("<option></option>");
     option.text(product.Name);
     option.val(product.Id);
     $("#Select1").append(option);
});

名称和Id是对象财产的名称。。。所以你可以随便叫他们。。。当然,如果您有Array。。。你想用for循环构建自定义函数。。。然后调用文档就绪中的函数。。。干杯

其他回答

就我个人而言,我更喜欢用这种语法附加选项:

$('#mySelect').append($('<option>', {
    value: 1,
    text: 'My option'
}));

如果要从项目集合中添加选项,可以执行以下操作:

$.each(items, function (i, item) {
    $('#mySelect').append($('<option>', { 
        value: item.value,
        text : item.text 
    }));
});

我喜欢使用非jquery方法:

mySelect.add(new Option('My option', 1));

您可以将选项动态添加到下拉列表中,如下图所示。在此示例中,我获取了数组数据,并将这些数组值绑定到下拉列表中,如输出截图所示

输出:

var resultData=[“孟买”,“德里”,“钦奈”,“果阿”]$(文档).ready(函数){var myselect=$('<select>');$.each(resultData,函数(索引,键){myselect.append($('<option></option>').val(key).html(key));});$(“#selectCity”).append(myselect.html());});<script src=“https://ajax.aspnetcdn.com/ajax/jQuery/jquery-3.2.1.min.js"></script><select id=“selectCity”></选择>

为了提高性能,您应该尝试只更改DOM一次,如果要添加许多选项,则更应该如此。

var html = '';

for (var i = 0, len = data.length; i < len; ++i) {
    html.join('<option value="' + data[i]['value'] + '">' + data[i]['label'] + '</option>');
}           

$('#select').append(html);

这很简单:

$('#select_id').append('<option value="five" selected="selected">Five</option>');

or

$('#select_id').append($('<option>', {
                    value: 1,
                    text: 'One'
                }));