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

使用jQuery从JavaScript对象添加选项的最佳方法是什么？

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

这就是我做的:

selectValues = { "1": "test 1", "2": "test 2" };

for (key in selectValues) {
  if (typeof (selectValues[key] == 'string') {
    $('#mySelect').append('' + selectValues[key] + '');
  }
}

简洁明了的解决方案:

这是matdumsa的清理和简化版本:

$.each(selectValues, function(key, value) {
     $('#mySelect')
          .append($('', { value : key })
          .text(value));
});

来自matdumsa的更改:(1)删除了append()中选项的close标记,(2)将属性/属性移动到map中作为append()的第二个参数.

1> matdumsa..：

---

与其他答案一样,以jQuery方式:

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

---

我首先将`$("#mySelect")`分配给var,否则每次调用`$("#mySelect")`循环内部都非常浪费,就像更新DOM一样.请参阅http://www.artzstudio.com/2009/04/jquery-performance-rules/#cache-jquery-objects中的第3点和第6点.

---

我建议更好的jQuery样式:$('#mySelect').append($("").val(key).text(value));

---

随着这个答案的流行,值得一提的是你应该避免循环中的DOM更新.http://jsperf.com/jquery-append-array-vs-string

---

你可以在`each`循环之外做`var mySelect = $("#mySelect").那会更有效率.请参阅下面的Carl的回答

---

由于错误的意图,这个答案是如此误导......`attr`和`text`实际上是`$('')`'对象的方法

2> gpilotino..：

---

var output = [];

$.each(selectValues, function(key, value)
{
  output.push(''+ value +'');
});

$('#mySelect').html(output.join(''));

通过这种方式,您只能"触摸DOM"一次.

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

---

你的方法显然比上面的'正确'答案更快,因为它也使用更少的jQuery.

---

如果`key`有一些引号或`>,<`,则会中断.

---

一个小的改进是使用连接而不是加号连接,如下所示:output.push('',value,'');

---

行"$('#mySelect').get(0).innerHTML = output.join('');" 据我所知,它适用于Chrome和FF3.x但不适用于IE7

---

而且,如果我有两个选项,我不想失去.如何将这些新选项值附加到现有值？

---

+1这个解决方案,但$ .each成为新的瓶颈.如果适用,请将其替换为旧式for循环:http://jsperf.com/for-vs-foreach/37

3> rocktheroad..：

---

这稍微快一点.

var selectValues = {
  "1": "test 1",
  "2": "test 2"
};
var $mySelect = $('#mySelect');
//
$.each(selectValues, function(key, value) {
  var $option = $("", {
    value: key,
    text: value
  });
  $mySelect.append($option);
});

---

它认为缓存`$('#mySelect')`是一个更好的主意,所以你只能在循环之前查找一次.目前,它正在DOM中搜索每个选项的元素.

---

完善.要添加它,可以添加选择的其他属性.$ .each(selectValues,function(id,value,text){$('#mySelect').append($("",{id:id value:value,text:text}));} );

---

@ckarbass - 取决于你的DOM有多大.将它分配给变量的潜力很大,很少,比在SO中写评论要少得多!

4> Carl Hörberg..：

---

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

---

是的,它是:http://www.devguru.com/technologies/ecmascript/quickref/option.html

---

从来没有听说过'Option`对象.是否内置于所有浏览器中？

---

我尝试使用`new Option`,但发现它在IE6和7中不起作用.我没有理由,但许多完整的jQuery选项都有效.

5> Nickolay..：

---

使用DOM Elements Creator插件(我最喜欢的):

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

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

$("").attr("value", "val").text("myText")).appendTo('#mySelect');

使用Option(避免额外的工作解析HTML Option):

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

6> 小智..：

---

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

$.each(selectData, function(i, option)
{
    $("").val(option.id).text(option.title).appendTo("#selectBox");
});

如果你想要速度,最快(经过测试!)的方式就是这个,使用数组,而不是字符串连接,并且只使用一个追加调用.

auxArr = [];
$.each(selectData, function(i, option)
{
    auxArr[i] = "" + option.title + "";
});

$('#selectBox').append(auxArr.join(''));

7> Сухой27..：

---

@joshperry

似乎普通.append也按预期工作,

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

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

---

优雅的加分点:适当地使用`map()`结构,结合`append()`的属性来正确添加一个对象数组!

8> Animism..：

---

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

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

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

9> Teej..：

---

 var output = [];
 var length = data.length;
 for(var i = 0; i < length; i++)
 {
    output[i++] = '' + data[i].start + '';
 }

 $('#choose_schedule').get(0).innerHTML = output.join('');

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

10> Jack Holt..：

---

转发...我在Android 2.2(Cyanogen 7.0.1)手机(T-Mobile G2)上使用带有PhoneGap 1.0.0的jQuery Mobile 1.0b2并且无法使用.append()方法.我必须使用.html(),如下所示:

var options;
$.each(data, function(index, object) {
    options += '' + object.stop + '';
});

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

11> Nick Josevsk..：

---

有一种方法使用Microsoft Templating方法,该方法目前正在提议包含在jQuery核心中.使用模板的能力更强,因此对于最简单的情况,它可能不是最佳选择.有关详细信息,请参阅Scott Gu的帖子,其中概述了这些功能.

首先包括可从github获得的模板化js文件.

然后用你的数据调用.render()方法

var someData = [
    { Text: "one", Value: "1" },
    { Text: "two", Value: "2" },
    { Text: "three", Value: "3"}];

$("#templateOptionItem").render(someData).appendTo("#mySelect");

我已经更详细地发表了这种方法的博客.

12> Komang..：

---

我做了类似的事情,通过Ajax加载一个下拉项.上面的响应也是可以接受的,但是为了获得更好的性能,尽可能少地修改DOM总是好的.

因此,不是在循环中添加每个项目,而是最好在循环内收集项目并在完成后附加它.

$(data).each(function(){
    ... Collect items
})

附加它,

$('#select_id').append(items); 

甚至更好

$('#select_id').html(items);

13> 小智..：

---

简单的方法是:

$('#SelectId').html("selectLaguna");

14> joshperry..：

---

前两个答案之间的妥协,在"一线"中:

$.fn.append.apply($('mySelect'),
    $.map(selectValues, function(val, idx) {
        return $("")
            .val(val.key)
            .text(val.value);
    })
);

使用map构建一个Option元素数组,然后使用apply将每个Option作为append函数的单独参数发送,将它们全部附加到Select .

15> Matt..：

---

而不是在任何地方重复相同的代码,我建议你更喜欢编写自己的jQuery函数,如:

jQuery.fn.addOption = function (key, value) {
    $(this).append($('', { value: key }).text(value));
};

然后添加选项只需执行以下操作:

$('select').addOption('0', 'None');

16> 小智..：

---

function populateDropdown(select, data) {   
    select.html('');   
    $.each(data, function(id, option) {   
        select.append($('').val(option.value).html(option.name));   
    });          
}   

它适用于jQuery 1.4.1.

有关在ASP.NET MVC和jQuery中使用动态列表的完整文章,请访问:http: //www.codecapers.com/post/Dynamic-Select-Lists-with-MVC-and-jQuery.aspx

17> Salim..：

---

$.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[i].name + "";
}
$('#mySelect').html(option);

18> 小智..：

---

Chrome中的这个解决方案有一个排序问题(jQuery 1.7.1)(Chrome按名称/编号对对象属性进行排序？)为了保持顺序(是的,它的对象滥用),我改变了这个:

optionValues0 = {"4321": "option 1", "1234": "option 2"};

对此

optionValues0 = {"1": {id: "4321", value: "option 1"}, "2": {id: "1234", value: "option 2"}};

然后$ .each将如下所示:

$.each(optionValues0, function(order, object) {
  key = object.id;
  value = object.value;
  $('#mySelect').append($('', { value : key }).text(value));
}); 

19> Stuart.Sklin..：

---

虽然之前的答案都是有效的答案 - 最好先将所有这些答案附加到documentFragmnet,然后将该文档片段作为元素追加到......之后.

看John Resig关于此事的想法 ......

有点像:

var frag = document.createDocumentFragment();

for(item in data.Events)
{
    var option = document.createElement("option");

    option.setAttribute("value", data.Events[item].Key);
    option.innerText = data.Events[item].Value;

    frag.appendChild(option);
}
eventDrop.empty();
eventDrop.append(frag);

20> DiverseAndRe..：

---

另一种方法:

var options = [];    
$.each(selectValues, function(key, value) {
    options.push($("", {
        value: key,
        text: value
    }));
});
$('#mySelect').append(options);

21> 小智..：

---

if (data.length != 0) {
    var opts = "";
    for (i in data)
        opts += ""+data[i][text]+"";

    $("#myselect").empty().append(opts);
}

这之后首先构建一个巨大的字符串操纵DOM只有一次.

22> kashif..：

---

您可以使用以下代码遍历json数组

$('').attr("value","someValue").text("Option1").appendTo("#my-select-id");

推荐阅读

• 程序员

  JSPM - 使用import和使用脚本标记包含客户端库文件是否有任何优点/缺点？

  如何解决《JSPM-使用import和使用脚本标记包含客户端库文件是否有任何优点/缺点？》经验，为你挑选了1个好方法。 ... [详细]
• 程序员

  如何让Yii2处理数据提供者的两个不同实例？

  如何解决《如何让Yii2处理数据提供者的两个不同实例？》经验，为你挑选了1个好方法。 ... [详细]
• 程序员

  img src属性的json值显示android TextView中的小蓝色框

  

  如何解决《imgsrc属性的json值显示androidTextView中的小蓝色框》经验，为你挑选了0个好方法。 ... [详细]
• 程序员

  比较者不工作

  如何解决《比较者不工作》经验，为你挑选了1个好方法。 ... [详细]
• 程序员

  如何在python中保护密码

  如何解决《如何在python中保护密码》经验，为你挑选了0个好方法。 ... [详细]
• 程序员

  instance_eval和singleton方法之间的区别

  如何解决《instance_eval和singleton方法之间的区别》经验，为你挑选了0个好方法。 ... [详细]
• 程序员

  AngularJS:显示加载器图像,直到加载数据

  如何解决《AngularJS:显示加载器图像,直到加载数据》经验，为你挑选了1个好方法。 ... [详细]
• 程序员

  Microsoft JScript运行时错误:对象预期代码800A13F

  如何解决《MicrosoftJScript运行时错误:对象预期代码800A13F》经验，为你挑选了1个好方法。 ... [详细]
• 程序员

  隐藏状态monad的类型参数

  如何解决《隐藏状态monad的类型参数》经验，为你挑选了1个好方法。 ... [详细]
• 程序员

  对于MVC6 RC1,现有的MVC项目是否有简单的升级过程？

  如何解决《对于MVC6RC1,现有的MVC项目是否有简单的升级过程？》经验，为你挑选了1个好方法。 ... [详细]
• 程序员

  动态突出显示时,将项目符号添加到<p>？

  如何解决《动态突出显示时,将项目符号添加到<p>？》经验，为你挑选了2个好方法。 ... [详细]
• 程序员

  是否可以将EntityFramework与MemSQL一起使用？

  如何解决《是否可以将EntityFramework与MemSQL一起使用？》经验，为你挑选了0个好方法。 ... [详细]
• 程序员

  为什么clock()返回1.84467e + 13？

  如何解决《为什么clock()返回1.84467e+13？》经验，为你挑选了1个好方法。 ... [详细]
• 程序员

  如何修复数组索引超出范围的异常

  如何解决《如何修复数组索引超出范围的异常》经验，为你挑选了1个好方法。 ... [详细]
• 程序员

  使用Express.JS来使用API

  如何解决《使用Express.JS来使用API》经验，为你挑选了1个好方法。 ... [详细]
• 程序员

  获取没有指定子项的父(作业)的SQL查询(状态)

  如何解决《获取没有指定子项的父(作业)的SQL查询(状态)》经验，为你挑选了0个好方法。 ... [详细]
• 程序员

  如何使用dplyr汇总与组不匹配的值

  如何解决《如何使用dplyr汇总与组不匹配的值》经验，为你挑选了2个好方法。 ... [详细]
• 程序员

  po> 2&1对popen做了什么？

  如何解决《po>2&1对popen做了什么？》经验，为你挑选了1个好方法。 ... [详细]
• 程序员

  无效的'asm':嵌套的汇编方言替代品

  如何解决《无效的'asm':嵌套的汇编方言替代品》经验，为你挑选了1个好方法。 ... [详细]
• 程序员

  允许在Javascript中使用命名参数或位置参数

  如何解决《允许在Javascript中使用命名参数或位置参数》经验，为你挑选了0个好方法。 ... [详细]

吐了个 "CAO" !

吐个槽吧,看都看了

会员登录 | 用户注册