使用jQuery向下拉列表中添加选项的最简单方法是什么?
这行吗?
$("#mySelect").append('<option value=1>My option</option>');
使用jQuery向下拉列表中添加选项的最简单方法是什么?
这行吗?
$("#mySelect").append('<option value=1>My option</option>');
当前回答
为什么不简单呢?
$('<option/>')
.val(optionVal)
.text('some option')
.appendTo('#mySelect')
此处测试:
for(设i=0;i<10;i++){$('<option/>').val(i).text('option'+i).appendTo('#mySelect')}<script src=“https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js“></script><select id=“mySelect”></select>
其他回答
为了提高性能,您应该尝试只更改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 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 resultData=[“孟买”,“德里”,“钦奈”,“果阿”]$(文档).ready(函数){var myselect=$('<select>');$.each(resultData,函数(索引,键){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”></选择>
答案中没有提及,但很有用。如果您希望也选择该选项,您可以添加:
var o = new Option("option text", "value");
o.selected=true;
$("#mySelect").append(o);