Question

使用jQuery将option添加到下拉列表的最简单方法是什么？

这会有用吗？

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

Answer 1

就个人而言，我更喜欢这种语法来附加选项：

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

如果您要从一组项目中添加选项，则可以执行以下操作：

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

Answer 2

这在IE8中不起作用（但在FF中也没有）：

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

此DID工作：

var o = new Option("option text", "value");
/// jquerify the DOM object 'o' so we can use the html method
$(o).html("option text");
$("#selectList").append(o);

Answer 3

您可以使用以下语法添加选项。您还可以访问way handle option in jQuery了解详情。

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



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



var option = new Option(text, value); $('#select').append($(option));

Answer 4

如果选项名称或值是动态的，您不必担心转义其中的特殊字符;在这里你可能更喜欢简单的DOM方法：

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

Answer 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>

Answer 6

效果很好。

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

Answer 7

无论出于什么原因，$("#myselect").append(new Option("text", "text"));在IE7 +中对我不起作用

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

Answer 8

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

Answer 9

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

Answer 10

我喜欢使用非jquery方法：

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

Answer 11

您可以动态地将选项添加到下拉列表中，如下例所示。在这个例子中，我已经获取了数组数据并将这些数组值绑定到下拉列表，如输出屏幕截图

所示

<强>输出：

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>

Answer 12

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

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

Answer 13

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

Answer 14

这是非常简单的事情。你可以这样做

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

或

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

Answer 15

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

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

这将在选择中插入“New Item”作为第3项。

Answer 16

当您附加选项并使用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

Answer 17

您可以使用text：

追加并设置Value属性

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

Answer 18

这只是获得最佳效果的快速点

总是在处理许多选项时，构建一个大字符串，然后将其添加到“选择”字样中。为了获得最佳性能

F.G。

var $ mySelect = $（＆＃39;＃mySelect＆＃39;）; var str =＆＃39;＆＃39;;

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

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

Answer 20

尝试

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>

Answer 21

基于dule's answer用于附加项目集合，单线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)中也可以使用此解决方案！

Answer 22

为什么不简单？

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

Answer 23

您可以在ES6中执行此操作

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

Answer 24

$(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);
});

Name和Id是对象属性的名称...所以你可以随意调用它们......当然，如果你有数组......你想用for循环构建自定义函数...然后只需调用准备好文件中的那个功能......干杯

Answer 25

这就是我这样做的方式，只需一个按钮即可添加每个选择标记。

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

Answer 26

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

Answer 27

你可以尝试下面的代码附加到选项

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

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

Answer 28

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

我认为最好的方法：

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

Answer 29

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

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

Answer 30

只需一行

   $.each(result, function (k,v) {
                         **if(k == selectedMonthNumber) var selectedMonth = 'selected'; else var selectedMonth = '';**
                             $("#periodMonth").append($('<option>', {
                                 value: k,
                                 text: v,
                                 **selected: selectedMonth**
                         }));
                    })

使用jQuery向<select>添加选项？</select>

30 个答案:

选项1 -

选项2 -

更快