使用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)的第二个参数移动到映射中。
大多数其他答案使用each函数对selectValues进行迭代。这需要为每个元素调用append,并在单独添加每个元素时触发回流。
将此答案更新为更惯用的函数方法(使用现代JS)可以形成为只调用append一次,使用map和option元素构造函数创建一个option元素数组。
使用OptionDOM元素应该可以减少函数调用开销,因为在创建后不需要更新Option元素,也不需要运行jQuery的解析逻辑。
$('mySelect').append($.map(selectValues, (k, v) => new Option(k, v)))
如果您创建一个将新建选项对象的工厂实用程序函数,则可以进一步简化此过程:
const newoption = (...args) => new Option(...args)
然后,这可以直接提供给地图:
$('mySelect').append($.map(selectValues, newoption))
以前的公式
因为append还允许将值作为可变数量的参数传递,所以我们可以预先创建选项元素映射列表,并使用apply将它们作为参数附加到单个调用中。
$.fn.append.apply($('mySelect'), $.map(selectValues, (k, v) => $("<option/>").val(k).text(v)));
在jQuery的后续版本中,append也接受数组参数,这可以稍微简化:
$('mySelect').append($.map(selectValues, (k, v) => $("<option/>").val(k).text(v)))
这看起来更好,提供了可读性,但比其他方法慢。
$.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(''));
有一种使用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");
我在博客中详细介绍了这种方法。