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

这行吗?

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

当前回答

这很好。

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

其他回答

为什么不简单呢?

$('<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>

为了提高性能,您应该尝试只更改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中有optgroup,则在DOM中出现错误。

我认为最好的方法是:

$("#select option:last").after($('<option value="1">my option</option>'));

我就是这样做的,用一个按钮添加每个选择标记。

$(document).on("click","#button",function() {
   $('#id_table_AddTransactions').append('<option></option>')
}

当您附加选项并使用jqueryvalidate时,我们发现了一些问题。您必须在选择多个列表中单击一个项目。您将添加此代码以处理:

$("#phonelist").append("<option value='"+ 'yournewvalue' +"' >"+ 'yournewvalue' +"</option>");

$("#phonelist option:selected").removeAttr("selected"); // add to remove lase selected

$('#phonelist option[value=' + 'yournewvalue' + ']').attr('selected', true); //add new selected