Adding options to a <select> using jQuery?

使用jQuery向下拉菜单添加option的最简单方法是什么？

会工作吗？

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

或使用$（“＃mySelect”）。html（....）用新选项替换当前选项。

为什么不简单？ $（'

#1 楼

这在IE8中不起作用（但在FF中却有效）：

$("#selectList").append(new Option("option text", "value"));

此DID工作：

我在IE8上遇到问题，但是您的代码对我有用，谢谢！

–亚历山大·泰勒（Alexandre L Telles）
2012年1月10日16:14

还要确保显示：table;不会作为样式应用到选择元素。这将破坏js代码

–高达
13年2月15日在15:00

如果您有兴趣，请查看以下错误，这些错误与Option不能与append（）一起使用在FireFox，Chrome中起作用，而在IE中不起作用：bugs.jquery.com/ticket/1641

– JackDev
13年7月22日在1:50

+1-为我工作，而无需“ jquerify”对象。 var o = new Option（'option text'，'value'）; o.innerHTML ='选项文本'; document.getElementById（'selectList'）。appendChild（o）;

–澳
13年11月15日在21:33

有没有一种方法可以向其中添加“ data-xxx”值？

– PedroJoaquín
19年5月16日在19:24

#2 楼

就我个人而言，我更喜欢使用以下语法来附加选项： br />

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

如果您要添加很多选项，则与构建一个HTML字符串并将其附加相比，这将非常慢

–单击升级
13年1月21日在22:27

与许多解决方案不同，它可以在IE中工作

–DancesWithBamboo
2014年5月13日下午2:38

@Rop项目= {选项1：{值：1，文本：1}，选项2：{值：2，文本：2}}

–gamliela
15-10-16在18:55

感谢@dule，但是我如何才能默认选择新选项？

–主_JABA
16年4月21日在12:30

{selected：true}

– jmadsen
17年1月13日在2:04

#3 楼

您可以使用以下语法添加选项，也可以在jQuery中访问方式处理选项以了解更多详细信息。

br />

第一个应该更改为$（“＃SectionNames”）。append（$（'

#4 楼

如果选项名称或值是动态的，则无需担心其中会转义特殊字符；在这种情况下，您可能更喜欢简单的DOM方法：

var s= document.getElementById('mySelect');
s.options[s.options.length]= new Option('My option', '1');

对我来说看起来并不简单！

–单击升级
09年4月11日在16:36

用javascript术语来说这很简单，jQuery使人们变得太容易了

– DWolf
13年3月25日在18:18

document.getElementById（'mySelect'）。add（new Option（'My option'，'1'））; //如果是IE8或更高版本

–海夫索
13年9月25日在17:54

#5 楼

选项1-

您可以尝试此-

$('#selectID').append($('<option>',
 {
    value: value_variable,
    text : text_variable
}));

喜欢此-

 for (i = 0; i < 10; i++)
{ 
     $('#mySelect').append($('<option>',
     {
        value: i,
        text : "Option "+i 
    }));
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id='mySelect'></select>

选项2-

或尝试使用此方法-

$('#selectID').append( '<option value="'+value_variable+'">'+text_variable+'</option>' );

像这样-

 for (i = 0; i < 10; i++)
{ 
     $('#mySelect').append( '<option value="'+i+'">'+'Option '+i+'</option>' );
}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<select id='mySelect'></select>

#6 楼

这很简单：

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

或

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

#7 楼

那很好。

如果添加多个选项元素，则建议执行一次附加操作，而不是在每个元素上执行附加操作。

#8 楼

出于任何原因，在IE7 +中执行$("#myselect").append(new Option("text", "text"));都不适合我

我不得不使用$("#myselect").html("<option value='text'>text</option>");

我在Android Chrome浏览器上（在手机上）使用了相同的语法（new Option（...），但在那儿也不起作用。

– raddevus
17-10-11在19:54

#9 楼

为了提高性能，您应该尝试仅更改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);

为了提高性能，您应该使用string.join（）串联字符串

–mfeineis
2015年11月6日14:58

这是一个很好的解决方案。我在示例中遇到了一个问题，即“ join（）”不是有效函数，但是该解决方案允许您使用jQuery“ promise”确定何时添加了所有选项并且DOM完成了更新。对于其他解决方案，一个接一个地添加选项，这很难做到。用以下示例替换示例中的最后一行，以便仅在DOM修改完成后才执行操作：$ .when（$（'＃select'）。append（html））。done（function（）{callSomeFunctionThatRequiresOptionsToBeSet（）} ）;

–美国
16年6月6日在21:14

#10 楼

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

除非我没有记错，否则此解决方案不仅需要jQuery，而且还需要jQueryUI。 selectmenu（）不属于jQuery核心，而是jQueryUI小部件。这使它成为一个笨拙的解决方案，不是吗？

–塔特拉
2014年5月21日20:37

#11 楼

我喜欢使用非jquery方法：

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

我喜欢它不是非jQuery;）不要经常看到

–达卡龙
15年8月26日在14:14

是的，尽管我不能质疑jquery的功能，但在某些情况下它并不能简化事情。

– caiohamamura
15年8月26日在14:24

#12 楼

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

输出：

 var resultData=["Mumbai","Delhi","Chennai","Goa"]
$(document).ready(function(){
   var myselect = $('<select>');
     $.each(resultData, function(index, key) {
	     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">

</select>

#13 楼

在任何答案中均未提及，但对于希望同时选择该选项的情况很有用，您可以添加：

var o = new Option("option text", "value");
o.selected=true;
$("#mySelect").append(o);

谢谢，我需要预选一个从json生成的选项，而且效果很好。

–乔治·帕特谢德（Georg Patscheider）
16-12-12在21:30

#14 楼

var select = $('#myselect');
var newOptions = {
                'red' : 'Red',
                'blue' : 'Blue',
                'green' : 'Green',
                'yellow' : 'Yellow'
            };
$('option', select).remove();
$.each(newOptions, function(text, key) {
    var option = new Option(key, text);
    select.append($(option));
});

#15 楼

有两种方法。您可以使用这两者之一。

第一：

$('#waterTransportationFrom').append('<option value="select" selected="selected">Select From Dropdown List</option>');

第二：

$.each(dataCollecton, function(val, text) {            
    options.append($('<option></option>').val(text.route).html(text.route));
});

#16 楼

如果要在选择中的特定索引处插入新选项：

$("#my_select option").eq(2).before($('<option>', {
    value: 'New Item',
    text: 'New Item'
}));

这会将“新项”作为选择中的第三个项插入。

#17 楼

您可以使用文本附加并设置Value属性：

$("#id").append($('<option></option>').attr("value", '').text(''));
$("#id").append($('<option></option>').attr("value", '4').text('Financial Institutions'));

#18 楼

当您追加选项并使用jquery validate时，我们发现了一些问题。
必须单击选择多个列表中的一项。
您将添加以下代码以进行处理：

$("#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

#19 楼

这个

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

#20 楼

如果在select中有optgroup，则您在DOM中出错。

我认为最好的方法是：

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

#21 楼

这只是获得最佳性能的捷径

，当您处理许多选项时，始终构建一个大字符串，然后将其添加到“选择”中以获得最佳性能

fg

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');

#22 楼

$(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循环构建自定义函数...然后只需在文档就绪状态下调用该函数...

#23 楼

根据dule附加项目集合的答案，单线for...in也可以创造奇迹：

 let cities = {'ny':'New York','ld':'London','db':'Dubai','pk':'Beijing','tk':'Tokyo','nd':'New Delhi'};

for(let c in cities){$('#selectCity').append($('<option>',{value: c,text: cities[c]}))}

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>
<select  id="selectCity"></select>

对象值和索引都分配给选项。即使在旧版jQuery（v1.4）中也可以使用此解决方案！

#24 楼

您可以尝试下面的代码将其附加到选项

  <select id="mySelect"></select>

    <script>
          $("#mySelect").append($("<option></option>").val("1").html("My enter code hereoption"));
    </script>

#25 楼

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

#26 楼

这是我这样做的方法，带有一个添加每个选择标签的按钮。

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

是否应该是$（document）.ready（function（）{$（“＃button”）。click（function（）{$（'＃id_table_AddTransactions'）。append（'

#27 楼

您可以在ES6中执行此操作：

$.each(json, (i, val) => {
    $('.js-country-of-birth').append(`<option value="${val.country_code}"> ${val.country} </option>`);
  });

#28 楼

如果有人来这里寻找使用数据属性添加选项的方法

使用attr

var option = $('<option>', { value: 'the_value', text: 'some text' }).attr('family', model.family);

使用数据-已添加1.2.3版本

var option = $('<option>', { value: 'the_value', text: 'some text' }).data('misc', 'misc-value);

#29 楼

尝试

mySelect.innerHTML+= '<option value=1>My option</option>';

 btn.onclick= _=> mySelect.innerHTML+= `<option selected>${+new Date}</option>`

 <button id="btn">Add option</button>

<select id="mySelect"></select>

#30 楼

为什么不简单呢？

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

编程黑洞网