使用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>');
}
}
干净/简单的解决方案：
这是matdumsa的清理和简化版本：
$.each(selectValues, function(key, value) {
$('#mySelect')
.append($('<option>', { value : key })
.text(value));
});
matdumsa的更改：（1）删除了append（）内选项的close标记，（2）将财产/属性作为append）的第二个参数移动到映射中。
对老@joshberry的回答进行了改进：
看起来plain.append也能像预期的那样工作，
$("#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
);
我做了类似的事情，通过Ajax加载一个下拉项。上面的响应也是可以接受的，但是为了更好的性能，尽可能少地修改DOM总是很好的。
因此，与其在循环中添加每个项目，不如在循环中收集项目，并在完成后将其追加。
$(data).each(function(){
... Collect items
})
附加它，
$('#select_id').append(items);
甚至更好
$('#select_id').html(items);
有一种使用MicrosoftTemplateing方法的方法，目前正在提议将其纳入jQuery核心。使用模板功能更强大，因此对于最简单的场景，它可能不是最佳选项。有关更多详细信息，请参阅Scott Gu概述这些功能的帖子。
首先包括github提供的模板js文件。
<script src="Scripts/jquery.tmpl.js" type="text/javascript" />
下一步设置模板
<script id="templateOptionItem" type="text/html">
<option value=\'{{= Value}}\'>{{= Text}}</option>
</script>
然后使用数据调用.render（）方法
var someData = [
{ Text: "one", Value: "1" },
{ Text: "two", Value: "2" },
{ Text: "three", Value: "3"}];
$("#templateOptionItem").render(someData).appendTo("#mySelect");
我在博客中详细介绍了这种方法。
$.each比for循环慢每次，DOM选择都不是循环$（“#mySelect”）.append（）中的最佳实践；
因此，最佳解决方案如下
如果JSON数据resp为
[
{"id":"0001", "name":"Mr. P"},
{"id":"0003", "name":"Mr. Q"},
{"id":"0054", "name":"Mr. R"},
{"id":"0061", "name":"Mr. S"}
]
将其用作
var option = "";
for (i=0; i<resp.length; i++) {
option += "<option value='" + resp[i].id + "'>" + resp[i].name + "</option>";
}
$('#mySelect').html(option);
