使用jQuery将选项添加到<select>中？
使用jQuery为下拉菜单添加option最简单的方法是什么？
这会工作吗？
$("#mySelect").append('<option value=1>My option</option>');
就个人而言，我更喜欢这个语法来附加选项：
$('#mySelect').append($('<option>', { value: 1, text: 'My option' }));
如果您要添加项目集合中的选项，则可以执行以下操作：
$.each(items, function (i, item) { $('#mySelect').append($('<option>', { value: item.value, text : item.text })); });
我同意Ashish，这不适用于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);
您可以使用以下语法添加选项，也可以访问jQuery中的方式处理选项以获取更多详细信息。
$（'select'）。append（$（''，{value：1，text：'One'}））;
$（ 'select'）追加（ '一'）。
var option = new Option（text，value）; $（ 'select'）追加（$（可选））。
如果选项名称或值是dynamic的，则不需要担心转义特殊字符; 在这里你可能更喜欢简单的DOM方法：
var s= document.getElementById('mySelect'); s.options[s.options.length]= new Option('My option', '1');
选项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>
不pipe做什么原因$("#myselect").append(new Option("text", "text")); 在IE7 +中不适合我
我不得不使用$("#myselect").html("<option value='text'>text</option>");
那效果很好。
如果添加多个选项元素，我build议执行一次追加，而不是对每个元素执行追加。
为了提高性能，您应该尝试一次更改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);
$('#mySelect').empty().append('<option value=1>My option</option>').selectmenu('refresh');
我喜欢用非jQuery的方法：
mySelect.add(new Option('My option', 1));
如果你想要select这个选项，它就像下面这样简单：
mySelect.add(new Option('My option', 1, true));
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)); });
没有在任何答案中提到，但有用的情况下，你希望该选项也被选中，你可以添加：
var o = new Option("option text", "value"); o.selected=true; $("#mySelect").append(o);
您可以将选项dynamic添加到下拉菜单中，如下面的示例所示。 在这个例子中，我已经获取了数组数据，并将这些数组绑定到了下拉菜单中，如输出屏幕截图所示
输出：
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="jquery-3.2.1.min.js"> </script> <select id="selectCity"> </select>
你可以追加和设置值属性文本：
$("#id").append($('<option></option>').attr("value", '').text('')); $("#id").append($('<option></option>').attr("value", '4').text('Financial Institutions'));
如果您想在select中的特定索引处插入新选项：
$("#my_select option").eq(2).before($('<option>', { value: 'New Item', text: 'New Item' }));
这将在select中插入“新项目”作为第三项。
当你追加选项并使用jqueryvalidation时，我们发现了一些问题。 您必须单击select多个列表中的一个项目。 您将添加此代码来处理：
$("#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
如果你有optgroup里面select ，你有错误的DOM。
我认为最好的办法是：
$("#select option:last").after($('<option value="1">my option</option>'));
你可以尝试下面的代码追加到选项
<select id="mySelect"></select> <script> $("#mySelect").append($("<option></option>").val("1").html("My enter code hereoption")); </script>
这很简单的事情。 你可以这样做
$('#select_id').append('<option value="five" selected="selected">Five</option>');
要么
$('#select_id').append($('<option>', { value: 1, text: 'One' }));
这是完整的指南
$('#select_id').append($('<option>',{ value: v, text: t }));
