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

这行吗?

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

当前回答

这很好。

如果添加多个选项元素,我建议执行一次追加,而不是对每个元素执行追加。

其他回答

如果您在select中有optgroup,则在DOM中出现错误。

我认为最好的方法是:

$("#select option:last").after($('<option value="1">my option</option>'));
$('#mySelect').empty().append('<option value=1>My option</option>').selectmenu('refresh');

这只是最佳性能的快速要点

总是当你处理很多选项时,建立一个大字符串,然后将其添加到“select”中以获得最佳性能

f.g.

var$mySelect=$('#mySelect');var str=“”;

$.each(items, function (i, item) {
    // IMPORTANT: no selectors inside the loop (for the best performance)
    str += "<option value='" + item.value + "'> " + item.text + "</option>";
});
// you built a big string

$mySelect.html(str); // <-- here you add the big string with a lot of options into the selector.
$mySelect.multiSelect('refresh');

甚至更快

var str = ""; 
for(var i; i = 0; i < arr.length; i++){
    str += "<option value='" + item[i].value + "'> " + item[i].text + "</option>";
}    
$mySelect.html(str);
$mySelect.multiSelect('refresh');

为什么不简单呢?

$('<option/>')
  .val(optionVal)
  .text('some option')
  .appendTo('#mySelect')

此处测试:

for(设i=0;i<10;i++){$('<option/>').val(i).text('option'+i).appendTo('#mySelect')}<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></script><select id=“mySelect”></select>

这个怎么样

var numbers = [1, 2, 3, 4, 5];
var option = '';

for (var i=0;i<numbers.length;i++){
     option += '<option value="'+ numbers[i] + '">' + numbers[i] + '</option>';
    }

    $('#items').append(option);