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

我正在寻找一些我不需要的插件,但也可能会有的插件中感兴趣。

这是我做了什么︰

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() 的第二个参数。

2008-10-04 20:58:46
问题评论:

可能的帮助︰ texotela.co.uk/code/jquery/select (后我都遇到这个问题,它是对我的帮助)

上面列出的清理的版本只能在 Jquery 1.4 +。为旧版本使用 matdumsa 的答案中的一个

{值︰ 键} 应为 {"值": 键} 如 matdumsa 的答案中所示。

我并不认为因此value是一个字符串 (和硬编码) 因为它不需要用引号引起。

回答:

其他答案,jQuery 的方式相同︰

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

我想给变量,否则为每次循环是非常浪费时间,作为内部正在更新 DOM 调用$("#mySelect")的所有分配$("#mySelect")的第一个请参阅点 #3 和 #6 处artzstudio.com/2009/04/jquery-performance-rules/...

也可以只做var mySelect = $("#mySelect") outside of the 每个循环。这将是效率高得多。请参阅下面的 Carl 的答案

我建议更好的 jQuery 样式︰ $('#mySelect').append ($("< 选项/>").val(key).text(value));

随着此答案的普及值得一提的应当避免在循环中的 DOM 更新。jsperf.com/jquery 追加的阵列-vs-字符串

此回答得使人产生误解,这是不正确的 intendation 的...attrtext实际上是方法的$('<option/>')的对象

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() 方法中某些分析)

您的方法显然是比上面的正确答案更快的一个,因为它使用较少的 jQuery 太。

行"$('#mySelect').get (0).innerHTML = output.join (");"工作但不是在 IE7 中镶边和 FF3.x 就可以判断

这将中断如果key具有某些报价单或>, <中。

而且,如果我有我不想失去的两个选项。如何将这些新选项值追加到现有的?

一个小的改进方法是将使用该连接,而不是加号,如下所示︰ output.push (< 选项值 =",键,">、 值、 </选项 >);

这是稍有更快和更清晰。

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

完美。若要在其上添加,无法添加选择的其他属性。$.each (selectValues,function(id,value,text) {$('#mySelect').append ($("< 选项/>",{id: id 值︰ 值、 文本︰ 文本}));});

它认为它将更好地了解到缓存 $(#mySelect #mySelect')',,以便查找循环前唯一一次。就在当前搜索每一个选项的元素 DOM。

@Sushanth--多大的性能造成影响这是如果集很小?

@ckarbass-取决于您的 DOM 有多大。可能很大和很少努力将其分配给一个变量,比编写注释等中少得多 !

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

从未听说之前的Option对象。所有浏览器的内置?

是的就是︰ devguru.com/technologies/ecmascript/quickref/option.html

我尝试使用new Option,但发现它不在 IE6 和 7 起作用。没有原因为何,但许多完整的 jQuery 选项有效。

好办法太添加选定内容。new Option('display', value, true)

第一个方法在 IE8 中不起作用。

使用DOM 元素创建者插件(我的最爱)︰

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

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

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

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

$('#mySelect').append($(document.createElement("option")).
                        attr("value","val").text("myText"));
请输入您的翻译

What is the best way to add options to a select from an array with jQuery?

确认取消