使用jQuery将选项添加到JS对象中的最佳方法是什么？

使用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>'); } } 

干净/简单的解决scheme：

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

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

matdumsa的变化：（1）删除append（）中的选项的close标签，（2）将属性/属性作为append（）的第二个参数移动到地图中。

Answer 1

与其他答案一样，以jQuery时尚：

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

Answer 2

 var output = []; $.each(selectValues, function(key, value) { output.push('<option value="'+ key +'">'+ value +'</option>'); }); $('#mySelect').html(output.join('')); 

通过这种方式，您只需触摸一次DOM即可。

我不知道如果最新的行可以转换为$（'＃mySelect'）。html（output.join（''）），因为我不知道jQuery的内部（也许它在一些parsingHTML（）方法）

Answer 3

这是更快，更清洁。

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

Answer 4

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

Answer 5

使用DOM Elements Creator插件 （我最喜欢的）：

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

使用Option构造函数（不确定浏览器支持）：

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

使用document.createElement （避免额外的工作用$("<option></option>")parsingHTML $("<option></option>") ）：

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

Answer 6

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

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

如果你想要的速度，最快（testing！）的方式是这样的，使用数组，而不是string连接，并只使用一个附加调用。

 auxArr = []; $.each(selectData, function(i, option) { auxArr[i] = "<option value='" + option.id + "'>" + option.title + "</option>"; }); $('#selectBox').append(auxArr.join('')); 

Answer 7

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

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

这是完全跨浏览器兼容。

Answer 8

@joshperry

似乎平原.append也按预期工作，

 $("mySelect").append( $.map(selectValues, function(v,k){ return $("<option>").val(k).text(v); }) ); 

Answer 9

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

我做了一些testing，我相信，这个工作是最快的。 ：P

Answer 10

被警告…我在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 += '<option value="' + object.id + '">' + object.stop + '</option>'; }); $('#selectMenu').html(options); 

Answer 11

有一种使用微软模板方法的方法 ，目前正在提议将其纳入jQuery核心。 使用模板有更多的权力，所以对于最简单的情况，它可能不是最好的select。 有关更多详情，请参阅Scott Gu的文章概述function。

首先包括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"); 

我已经更详细地讨论了这种方法。

Answer 12

前两个答案之间的妥协，在一个“class轮”：

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

使用map构build一个Option元素数组，然后使用apply将它们全部添加到Select中，通过apply将每个Option作为append函数的单独参数发送。

Answer 13

我做了这样的事情， 通过Ajax加载下拉项目 。 上面的响应也是可以接受的，但是为了获得更好的性能，尽可能less的DOM修改总是很好的。

因此，不要在循环中添加每个项目，最好在循环中收集项目，并在完成后追加项目。

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

追加它，

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

甚至更好

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

Answer 14

简单的方法是：

 $('#SelectId').html("<option value='0'>select</option><option value='1'>Laguna</option>"); 

Answer 15

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

它适用于jQuery 1.4.1。

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

Answer 16

Chrome浏览器（jQuery 1.7.1）中的解决scheme有一个sorting问题（Chrome通过名称/编号对对象属性进行sorting？）为了保持顺序（是的，它的对象滥用），我改变了这个：

 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($('<option>', { value : key }).text(value)); }); 

Answer 17

虽然以上所有都是有效的答案 – 最好将所有这些附加到文件Fragmnet，然后将该文件片段附加为一个元素后…

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

Answer 18

另一种方法是：

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

Answer 19

 if (data.length != 0) { var opts = ""; for (i in data) opts += "<option value='"+data[i][value]+"'>"+data[i][text]+"</option>"; $("#myselect").empty().append(opts); } 

这首先build立一个巨大的string后操纵DOM一次。

Answer 20

我不build议在任何地方重复使用相同的代码，而是build议编写自己的JQuery函数，比如：

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

然后添加一个选项只需执行以下操作：

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

Answer 21

你可以用下面的代码迭代你的json数组

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

Answer 22

一个jQuery插件可以在这里find： http : //remysharp.com/2007/01/20/auto-populating-select-boxes-using-jquery-ajax/ 。

Answer 23

这就是我所做的二维数组：第一列是我添加到<option> innerHTML的项目，第二列是record_id我添加到<option>的value ：

1. PHP

    $items = $dal->get_new_items(); //gets data from the db $items_arr = array(); $i = 0; foreach ($items as $item) { $first_name = $item->first_name; $last_name = $item->last_name; $date = $item->date; $show = $first_name . " " . $last_name . ", " . $date; $request_id = $request->request_id; $items_arr[0][$i] = $show; $items_arr[1][$i] = $request_id; $i++; } echo json_encode($items_arr); 

2. JS / AJAX

    function ddl_items(){ if (window.XMLHttpRequest){ // code for IE7+, Firefox, Chrome, Opera, Safari xmlhttp=new XMLHttpRequest(); } else{ // code for IE6, IE5 xmlhttp=new ActiveXObject("Microsoft.XMLHTTP"); } xmlhttp.onreadystatechange=function(){ if (xmlhttp.readyState==4 && xmlhttp.status==200){ var arr = JSON.parse(xmlhttp.responseText); var lstbx = document.getElementById('my_listbox'); for (var i=0; i<arr.length; i++) { var option = new Option(arr[0][i], arr[1][i]); lstbx.options.add(option); } } }; xmlhttp.open("GET","Code/get_items.php?dummy_time="+new Date().getTime()+"",true); xmlhttp.send(); } } 

Answer 24

我发现这很简单，效果很好。

 for (var i = 0; i < array.length; i++) { $('#clientsList').append($("<option></option>").text(array[i].ClientName).val(array[i].ID)); }; 

Answer 25

1. $.each比循环慢
2. 每次domselect都不是循环$("#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.length; i++) { option += "<option value='"+resp[i].id+"'>"+resp[i].name+"</option>"; } $('#mySelect').html(option); 

Answer 26

JSON格式：

 [{ "org_name": "Asset Management" }, { "org_name": "Debt Equity Foreign services" }, { "org_name": "Credit Services" }] 

和jquery填充ajax成功的下拉列表中的值：

 success: function(json) { var options = []; $('#org_category').html(''); // Set the Dropdown as Blank before new Data options.push('<option>-- Select Category --</option>'); $.each(JSON.parse(json), function(i, item) { options.push($('<option/>', { value: item.org_name, text: item.org_name })); }); $('#org_category').append(options); // Set the Values to Dropdown } 

Answer 27

我把两个最好的答案结合成一个很好的答案。

 var outputConcatenation = []; $.each(selectValues, function(i, item) { outputConcatenation.push($("<option></option>").attr("value", item.key).attr("data-customdata", item.customdata).text(item.text).prop("outerHTML")); }); $("#myselect").html(outputConcatenation.join('')); 

Answer 28

使用$ .map（）函数，你可以用更优雅的方式来做到这一点：

 $('#mySelect').html( $.map(selectValues, function(val, key){ return '<option value="' + val + '">'+ key + '</option>'; }).join('') ); 

Answer 29

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