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

Question

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

这会有用吗？

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

您可以使用以下语法添加选项.您还可以访问jQuery中的方法句柄选项以获取更多详细信息.

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

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

3. 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

这个很简单的事情.你可以通过这种方式做到这一点

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

要么

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

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

Answer 10

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

Answer 11

我喜欢使用非jquery方法:

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

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

Answer 13

在任何答案中都没有提到,但有用的是您希望同时选择该选项的情况,您可以添加:

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

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

Answer 15

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

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

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

Answer 16

为什么不简单？

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

Answer 17

有两种方法。您可以使用这两个。

第一：

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