使用 jQuery 将option 添加到下拉列表的最简单方法是什么？
这行得通吗？
$("#mySelect").append('<option value=1>My option</option>');
【问题讨论】：
$("#mySelect").html(....) 将当前选项替换为新选项。
$('<option/>').val(optVal).text('some option').appendTo('#mySelect')
标签： javascript jquery html-select
效果很好。
如果添加多个选项元素，我建议执行一次附加，而不是对每个元素执行附加。
【讨论】：
如果选项名称或值是动态的，您就不必担心转义其中的特殊字符；在这种情况下，您可能更喜欢简单的 DOM 方法：
var s= document.getElementById('mySelect');
s.options[s.options.length]= new Option('My option', '1');
【讨论】：
无论出于何种原因，$("#myselect").append(new Option("text", "text")); 在 IE7+ 中都不适合我
我不得不使用$("#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');
【讨论】：
selectmenu() 不是 jQuery 核心的一部分，而是一个 jQueryUI widget。这使它成为一个相当严厉的解决方案，不是吗？
您可以使用以下语法添加选项，也可以访问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));
【讨论】：
value 而不是val）。正确的代码应该是$('select').append('<option value="1">One</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);
【讨论】：
string.join() 连接字符串
在任何答案中都没有提到，但有用的是您希望该选项也被选中，您可以添加：
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));
});
【讨论】：
如果您在 select 中有 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'));
【讨论】：
你可以试试这个-
$('#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>或者试试这个-
$('#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>【讨论】：
你可以尝试下面的代码附加到选项
<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 $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');
【讨论】：
有两种方法。您可以使用这两种中的任何一种。
第一：
$('#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>')
}
【讨论】：
$(document).ready(function(){ $("#button").click(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>`);
});
【讨论】：
基于 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)！
【讨论】：
如果有人来这里寻找添加数据属性选项的方法
使用 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>【讨论】：