javascript - jQuery将option添加到select的最佳方法是什么?

  显示原文与译文双语对照的内容

使用jQuery从JSON对象中添加选项的最佳方法是什么?

我在寻找一些我不需要插件的东西,但也会对那些插件感兴趣。

这就是我做的:


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()的关闭标记,( 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(''));

以这种方式你只需一次。

我不确定最近的行是否可以转换为 $('#mySelect').html(output.join('')),因为我不知道jquery内部( 也许它在 html() 方法中做了一些解析)

这稍微快一点和干净。


$.each(selectValues, function(key, value) {
 $('#mySelect').append($("<option/>", {
 value: key,
 text: value
 }));
});

jQuery


var list = $("#selectList");
$.each(items, function(index, item) {
 list.append(new Option(item.text, item.value));
});

纯 javascript


var list = document.getElementById("selectList");
for(var i in items) {
 list.add(new Option(items[i].text, items[i].value));
}

使用 DOM元素的创建者插件 ( 我的收藏):


$.create('option', {'value': 'val'}, 'myText').appendTo('#mySelect');

使用 Option 构造函数( 不确定浏览器支持):


$(new Option('myText', 'val')).appendTo('#mySelect');

使用 document.createElement ( 使用 $("<option></option>") 避免额外的工作解析 HTML ):


$('#mySelect').append($(document.createElement("option")).
 attr("value","val").text("myText"));

这看起来更好,提供可读性,但比其他方法慢。


$.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(''));


 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('');

我做了一些测试,这是我认为最快的工作:

forwarned。我用 JQuery Mobile 1.0b2与phonegap 1.0.0 Android 2.2 ( 氰 7.0.1 ) 电话( T-Mobile G2 ) 和无法. append() 方法工作。 我必须使用. html(),如下所示:


var options;
$.each(data, function(index, object) {
 options += '<option value="' + object.id + '">' + object.stop + '</option>';
});

$('#selectMenu').html(options);

有一种使用 Microsoft模板方法的方法,它目前正被纳入到jQuery核心中。 使用模板有更多的能力,所以对于最简单的场景,它可能不是最好的选择。 有关更多细节,请查看gu的Scott post 。

首先包括模板化js文件,可以从 github的web 中获得。


<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");

我在博客上使用了的方法,更详细地描述了这种方法。

所有这些答案似乎不必要复杂。 你需要的是:


var options = $('#mySelect').get(0).options;
$.each(selectValues, function(key, value) {
 options[options.length] = new Option(key, value);
});

这完全是 跨浏览器 兼容的。

...