使用jQuery从JavaScript对象向<select>添加选项的最佳方法是什么？
我正在寻找不需要插件的东西，但我也对那里的插件感兴趣。
这是我所做的：
selectValues = { "1": "test 1", "2": "test 2" };
for (key in selectValues) {
if (typeof (selectValues[key] == 'string') {
$('#mySelect').append('<option value="' + key + '">' + selectValues[key] + '</option>');
}
}
一个干净/简单的解决方案：
这是一个经过清理和简化的version of matdumsa's：
$.each(selectValues, function(key, value) {
$('#mySelect')
.append($('<option>', { value : key })
.text(value));
});
[从matdumsa的更改：（1）删除了append（）内选项的关闭标记，（2）将属性/属性移到了地图中，作为append（）的第二个参数。
与其他答案相同，以jQuery方式：
$.each(selectValues, function(key, value) {
$('#mySelect')
.append($("<option></option>")
.attr("value", key)
.text(value));
});
var output = [];
$.each(selectValues, function(key, value)
{
output.push('<option value="'+ key +'">'+ value +'</option>');
});
$('#mySelect').html(output.join(''));
这样，您只能“触摸DOM”一次。
我不确定最新的行是否可以转换为$（'＃mySelect'）。html（output.join（''）），因为我不知道jQuery内部（也许它在html（）中进行了一些解析）方法）
这会更快更干净。
var selectValues = {
"1": "test 1",
"2": "test 2"
};
var $mySelect = $('#mySelect');
//
$.each(selectValues, function(key, value) {
var $option = $("<option/>", {
value: key,
text: value
});
$mySelect.append($option);
});<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<select id="mySelect"></select>var list = $("#selectList");
$.each(items, function(index, item) {
list.append(new Option(item.text, item.value));
});
var list = document.getElementById("selectList");
for(var i in items) {
list.add(new Option(items[i].text, items[i].value));
}
如果您不必支持旧的IE版本，则显然要使用Option constructor，Option：
a readable and efficient solution
在功能上等同于，但比：更干净：
$(new Option('myText', 'val')).appendTo('#mySelect');
这看起来更好，提供了可读性，但是比其他方法慢。
$("<option></option>").attr("value", "val").text("myText")).appendTo('#mySelect');
如果要提高速度，最快的方法（经过测试！）是这种方法，它使用数组，而不是字符串连接，并且仅使用一个追加调用。
$.each(selectData, function(i, option)
{
$("<option/>").val(option.id).text(option.title).appendTo("#selectBox");
});
对较旧auxArr = [];
$.each(selectData, function(i, option)
{
auxArr[i] = "<option value='" + option.id + "'>" + option.title + "</option>";
});
$('#selectBox').append(auxArr.join(''));
的改进：
似乎普通的[[.append也可以按预期工作，
@joshperry's answer或更短，
$("#mySelect").append( $.map(selectValues, function(v,k){ return $("<option>").val(k).text(v); }) );
$("#mySelect").append(
$.map(selectValues, (v,k) => $("<option>").val(k).text(v))
// $.map(selectValues, (v,k) => new Option(v, k)) // using plain JS
);
完全兼容跨浏览器。
var options = $('#mySelect').get(0).options;
$.each(selectValues, function(key, value) {
options[options.length] = new Option(value, key);
});
var options;
$.each(data, function(index, object) {
options += '<option value="' + object.id + '">' + object.stop + '</option>';
});
$('#selectMenu').html(options);
我已经完成了一些测试，我相信这可以最快地完成这项工作。 ：P
var output = [];
var length = data.length;
for(var i = 0; i < length; i++)
{
output[i++] = '<option value="' + data[i].start + '">' + data[i].start + '</option>';
}
$('#choose_schedule').get(0).innerHTML = output.join('');
的方法正在提议纳入jQuery核心。使用模板的功能更多，因此对于最简单的情况，它可能不是最佳选择。有关更多详细信息，请参见Scott Gu的文章概述了这些功能。首先包含可从Microsoft Templating approach获得的模板js文件。
下一次设置模板
<script src="Scripts/jquery.tmpl.js" type="text/javascript" />
然后将数据与.render（）方法一起使用
<script id="templateOptionItem" type="text/html"> <option value=\'{{= Value}}\'>{{= Text}}</option> </script>
我已经var someData = [
{ Text: "one", Value: "1" },
{ Text: "two", Value: "2" },
{ Text: "three", Value: "3"}];
$("#templateOptionItem").render(someData).appendTo("#mySelect");
更详细地介绍了此方法。因此，与其将每个项目添加到循环中，不如将其收集在循环中并在完成后将其附加。
loading a dropdown item via Ajax
追加，
$(data).each(function(){
... Collect items
})
甚至更好
$('#select_id').append(items);
$('#SelectId').html("<option value='0'>select</option><option value='1'>Laguna</option>");
函数来迭代each。这要求为每个元素调用append，并且在分别添加每个元素时触发重排。$('mySelect').append($.map(selectValues, (k, v) => $("<option/>").val(k).text(v)))
var frag = document.createDocumentFragment();
for(item in data.Events)
{
var option = document.createElement("option");
option.setAttribute("value", data.Events[item].Key);
option.innerText = data.Events[item].Value;
frag.appendChild(option);
}
eventDrop.empty();
eventDrop.append(frag);
慢于$.each循环var options = [];
$.each(selectValues, function(key, value) {
options.push($("<option/>", {
value: key,
text: value
}));
});
$('#mySelect').append(options);
if (data.length != 0) {
var opts = "";
for (i in data)
opts += "<option value='"+data[i][value]+"'>"+data[i][text]+"</option>";
$("#myselect").empty().append(opts);
}
的innerHTML中。第二列是record_id i，添加到<option>的value： function ddl_items() {
if (window.XMLHttpRequest) {
// Code for Internet Explorer 7+, Firefox, Chrome, Opera, and Safari
xmlhttp=new XMLHttpRequest();
}
else{
// Code for Internet Explorer 6 and Internet Explorer 5
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function() {
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
var arr = JSON.parse(xmlhttp.responseText);
var lstbx = document.getElementById('my_listbox');
for (var i=0; i<arr.length; i++) {
var option = new Option(arr[0][i], arr[1][i]);
lstbx.options.add(option);
}
}
};
xmlhttp.open("GET", "Code/get_items.php?dummy_time=" + new Date().getTime() + "", true);
xmlhttp.send();
}
}
。$('#mySelect').html( $.map(selectValues, function(val, key){
return '<option value="' + val + '">'+ key + '</option>';
}).join(''));
<!DOCTYPE html>
<html lang="en">
<head>
<title>append selectbox using jquery</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript">
function setprice(){
var selectValues = { "1": "test 1", "2": "test 2" };
$.each(selectValues, function(key, value) {
$('#mySelect')
.append($("<option></option>")
.attr("value",key)
.text(value));
});
}
</script>
</head>
<body onload="setprice();">
<select class="form-control" id="mySelect">
<option>1</option>
<option>2</option>
<option>3</option>
<option>4</option>
</select>
</body>
</html>
用作选择元素的ID。