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

效果不错。

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

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

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

无论出于什么原因，在IE7+中做$("#myselect").append(new Option("text", "text"));都不适合我

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

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

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

这确实奏效了：

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

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

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

如果要从项目集合中添加选项，可以执行以下操作：

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

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

您可以使用以下语法添加选项，您也可以访问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));

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

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

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

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

没有在任何答案中提到，但有用的是，如果您希望该选项也被选中，您可以添加：

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

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

如果你在选择中有optgroup，你在DOM中得到错误。

我认为最好的方法是：

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

我喜欢使用非jQuery方法：

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

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

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

备选案文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>

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

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

我们发现一些问题，当你追加选项和使用jQuery验证。您必须单击选择多个列表中的一个项目。您将添加此代码来处理：

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

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

输出：

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>

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

这很简单：

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

或

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

这只是最佳表现的快速积分

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

f. g.

var$my选择 = $('#my选择'）；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');

有两种方法。你可以使用这两种方法中的任何一种。

第一：

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

这就是我做的方式，用一个按钮来添加每个选择标签。

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

这个怎么样

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

$(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是对象属性的名称……所以你可以随意称呼它们……当然，如果你有Array……你想用for循环构建自定义函数……然后在文档中调用该函数……干杯

你可以在ES6中这样做：

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

基于dul的答案附加项目集合，单行代码#0也将创造奇迹：

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）！

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

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

只有一条线

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

试试看

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>

为什么不干脆？

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