题 使用jQuery作为JS对象向select中添加选项的最佳方法是什么?


添加选项的最佳方法是什么? <select> 从使用jQuery的JavaScript对象?

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

这就是我做的:

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)将属性/属性移动到map中作为append()的第二个参数。


1205
2017-10-04 20:58


起源


也许是帮助: texotela.co.uk/code/jquery/select (在我偶然发现这个问题之后,这对我有所帮助) - ManBugra
上面列出的清理版本仅适用于Jquery 1.4+。对于旧版本,请使用matdumsa答案中的版本 - Thedric Walker
{value:key}应该是{“value”:key},如matdumsa的回答中所示。 - Nick P
我不相信 value 是一个字符串(和硬编码),它不需要引用。 - Darryl Hein
可能这会对你有所帮助 - kvcodes.com/2016/10/... - Kvvaradha


答案:


与其他答案相同,采用jQuery方式:

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

1223
2017-10-04 21:12



我首先要分配 $("#mySelect") 到var,否则调用 $("#mySelect") 每次循环内部都非常浪费,就像更新DOM一样。见第3点和第6点 artzstudio.com/2009/04/jquery-performance-rules/... - Patrick
那么你可以做到 var mySelect = $("#mySelect") outside of the 每个循环。那会更有效率。请参阅下面的Carl的回答 - Patrick
我建议更好的jQuery样式:$('#mySelect')。append($(“<option />”).val(key).text(value)); - FAjir
随着这个答案的流行,值得一提的是你应该避免循环中的DOM更新。 jsperf.com/jquery-append-array-vs-string - jthomas
由于错误的意图,这个答案是如此误导...... attr和 text 实际上是方法 $('<option/>')-目的 - Blauhirn


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()中做了一些解析方法)


238
2017-11-05 19:42



你的方法显然比上面的'正确'答案更快,因为它也使用更少的jQuery。 - Thorpe Obazee
行“$('#mySelect')。get(0).innerHTML = output.join('');”据我所知,它适用于Chrome和FF3.x但不适用于IE7 - blu
这会打破 key 有一些引用或 >, < 在里面。 - nickf
而且,如果我有两个选项,我不想失去。如何将这些新选项值附加到现有值? - VansFannel
一个小的改进是使用连接而不是加号连接,如下所示:output.push('<option value =“',key,'”>',value,'</ option>'); - MM.


这稍微快一点。

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

181
2017-07-01 07:00



完善。要添加它,可以添加选择的其他属性。 $ .each(selectValues,function(id,value,text){$('#mySelect')。append($(“<option />”,{id:id value:value,text:text}));} ); - idok
它认为缓存`$('#mySelect')`是一个更好的主意,所以你只能在循环之前查找一次。目前,它正在DOM中搜索每个选项的元素。 - Sushanth --
@ Sushanth--如果这个集很小,那么这个性能有多大? - ckarbass
@ckarbass - 取决于你的DOM有多大。将它分配给变量的潜力很大,很少,比在SO中写评论要少得多! - Nick H247


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

78
2018-05-31 22:52



从来没有听说过 Option 对象之前。这是内置于所有浏览器? - Darryl Hein
是的: devguru.com/technologies/ecmascript/quickref/option.html - Carl Hörberg
我试过用 new Option,但发现它在IE6和7中不起作用。我没有理由,但许多完整的jQuery选项都有效。 - Darryl Hein
添加选择的好方法。 new Option('display', value, true) - boatcoder
第一种方法在IE8中不起作用。 - simon


运用 DOM Elements Creator插件 (我的最爱):

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

30
2017-10-05 15:49





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

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

25
2017-12-21 15:50





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

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

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


17
2017-10-11 17:20



应该是吗? new Option(value, key); ?该 参数顺序 是选项(text_visible_part,value_behind_the_scenes)。 - Bob Stein


@joshperry

看来很简单 。附加 也按预期工作,

$("mySelect").append(
  $.map(selectValues, function(v,k){

    return $("<option>").val(k).text(v);
  })
);

16
2018-04-17 11:29



你可以选择使用吗? $.weakmap 允许的 GC - Chef_Code
优雅的奖励点:恰当地使用 map() 结构,结合的属性 append() 正确添加对象数组! - Jochem Schulenklopper


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

我做了一些测试,我相信,这项工作最快。 :P


14
2017-11-09 06:29



。与其他实现相同结果的方法相比,每个人都很慢。这就是我的想法,并会推荐这种方法。 - Allen Tellez
不幸的是,这里有90%的变体使用$ .each()。 for()循环可以为您提供更多的控制和性能优势,即使它不那么紧凑。 - HoldOffHunger