使用jquery从javascript对象向添加选项的最佳方法是什么？

我正在寻找一些我不需要插件来做的事情，但是我也会对外面的插件感兴趣。

我就是这样做的：

1 2 3 4 5 6 7

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：

1 2 3 4 5

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

Matdumsa的更改：(1)删除了append()内选项的close标记；(2)将属性/属性作为append()的第二个参数移动到映射中。

相关讨论

• 可能有帮助：texotela.co.uk/code/jquery/select(在我偶然发现这个问题后，它对我是一个帮助)
• 上面列出的清理版本仅在jquery 1.4+中有效。对于旧版本，使用Matdumsa答案中的一个。
• 值：键应为"值"：键，如Matdumsa的答案所示。
• 我不这么认为，因为value是一个字符串(硬编码)，所以不需要引用它。
• 可能这对您有帮助-kvcodes.com/2016/10/&hellip；
• 标题应该改为"向带有jquery的JSON对象中的select添加选项的最佳方法是什么？"

---

与其他答案相同，jquery方式：

1 2 3 4 5 6

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

相关讨论

• 我首先将$("#mySelect")分配给一个var，否则在循环中每次调用$("#mySelect")都是非常浪费的，就像更新dom一样。请参见artzstudio.com/2009/04/jquery performance rules/&hellip；上的第3点和第6点。
• @帕特里克，你对这个问题的解决方案是什么，帕特里克？假设你有一组元素，你是怎么处理的？(将"$('myselect')"安装为"$('.xxx')"，这样您将得到一组selectlist。)
• 好吧，你只需要做每个循环的var mySelect = $("#mySelect") outside of the 。那会更有效率。见下面卡尔的答案
• 我建议使用更好的jquery样式：$('myselect').append($("
").val(key).text(value))；
• 我不理解这一点，因为$('#mySelect').append('</option>')返回select元素，而不是刚刚附加的option元素。所以链接将在select上，而不是option上，我们不想设置select的值和文本——我们想在选项上这样做。
• 马特，检查圆括号嵌套。.append()位于select上，其他所有内容都在append中。$("
")是jquery创建新选项元素的简写，并且.val(key)和.text(value)将应用于该新选项，然后附加到select。(我指的是上面评论中Flo更简洁的语法，但顶级答案也是如此。)
• 随着这个答案的流行，值得一提的是您应该避免在循环中进行DOM更新。jspef.com/jquery-append-array-vs-string
• 这个回答是如此的误导，因为错误的意图…attr和text实际上是$('')对象的方法。
• 这个答案使用的是不推荐使用的jquery方法，性能差得离谱，仍然获得了90%的回答者的声誉。stackoverflow还远未被破坏，但这对站点来说是很糟糕的。
• 这是一个很好的解决方案，但它没有那么好的性能：(根据对象列表的大小，dom被多次调用，imho如果你真的关心性能的话，你应该避免这样做。
• 这在现实世界中是可怕的！如果你有超过100种元素，事情就会变得混乱！不要将其用于类似国家数据的用途。最好创建HTML字符串并在循环结束后附加它！：)
• 我对$('#mySelect')缓存的附加建议是使用for循环而不是$.each()。

---

1 2 3 4 5 6 7 8

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('')；"在chrome和ff3.x中有效，但据我所知，在ie7中无效。
• 如果key中有一些引号或>, <，则会中断。
• 如果键有引号或<或>则不是有效的HTML。本机innerhtml比使用jquery html()更快。
• 如果我有两个选择我不想失去。如何将这些新选项值附加到现有选项值中？
• 一个小的改进是使用join而不是加号连接，如so:output.push("
"，value，".")；
• +1这个解决方案，但是美元每一个都成为了新的瓶颈。如果适用，用老式for循环替换它：jspef.com/for-vs-foreach/37
• 如果您不需要支持IE8，那么本机array.for each将成为一个很好的$each替代品。

---

这是稍快和清洁。

1 2 3 4 5 6 7 8 9 10 11 12 13

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

1 2	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.11.1/jquery.min.js"> <select id="mySelect"></select>

相关讨论

• 很完美。要添加它，可以添加选择的其他属性。$.each(selectValues，函数(id，value，text)$('myselect').append($("
"，id:id value:value，text:text))；)；
• 它认为缓存`$('myselect')`'会是一个更好的主意，这样您在循环之前只能查找一次。目前，它正在DOM中搜索每个选项的元素。
• @Sushanth——如果场景很小，这会对性能有多大影响？
• @卡巴斯-看你的房间有多大。将它赋给变量的工作可能非常大，而且几乎没有，这比用so编写注释要少得多！

---

JQuery

1 2 3 4

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

普通JavaScript

1 2 3 4

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)
• @mark0978其实是new Option('display', value, true, true)(javascriptkit.com/jsref/select.shtml)
• 第一种方法在IE8中不起作用。

---

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

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

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

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

使用document.createElement(避免使用$("")解析HTML时的额外工作)：

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

---

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

1 2 3 4

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

如果你想要速度，最快的(测试过的！)方法是，使用数组，而不是字符串串联，并且只使用一个追加调用。

1 2 3 4 5 6 7

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

相关讨论

• 这是否意味着"最快"的方法是将不同的字符串部分也作为单个数组项插入，而不是在插入数组之前将每个选项的组成部分连接起来，因为它们都将在末尾作为一个连接起来？

---

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

1 2 3 4

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

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

相关讨论

• 应该是new Option(value, key);吗？参数顺序是选项(文本可见部分，值在场景后面)。
• 阵列推送跨浏览器是否兼容？那么，当数组推送更具可读性时，这不是不必要的复杂吗？

---

约瑟佩里

似乎很简单。附加也可以按预期工作，

1 2 3 4 5 6

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

相关讨论

• 你能不能用$.weakmap来考虑GC
• 优雅的加分：适当使用map()构造，结合append()的属性，正确添加对象数组！

---

1 2 3 4 5 6 7 8

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

相关讨论

• .与其他实现相同结果的方法相比，每种方法都是众所周知的缓慢。这就是我所想的，我会推荐这种方法。
• 不幸的是，这里90%的变体都使用了$.each()。for()循环可以为您提供更多的控制和性能优势，即使它不够紧凑。

---

被警告…我在Android 2.2(氰基7.0.1)手机(T-Mobile G2)上使用jquery mobile 1.0b2和phonegap 1.0.0，但根本无法使用.append()方法。我必须使用.html()，如下所示：

1 2 3 4 5 6

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

---

有一种使用Microsoft模板化方法的方法，目前正在提议将其包含到jquery核心中。使用模板有更多的功能，因此对于最简单的场景，它可能不是最佳的选择。有关更多详细信息，请参阅Scott Gu的文章概述这些功能。

首先包括Github提供的模板化JS文件。

1	<script src="Scripts/jquery.tmpl.js" type="text/javascript" />

下一步设置模板

1 2	<script id="templateOptionItem" type="text/html">     <option value=\'{{= Value}}\'>{{= Text}}</option>

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

1 2 3 4 5 6

var someData = [     { Text:"one", Value:"1" },     { Text:"two", Value:"2" },     { Text:"three", Value:"3"}]; $("#templateOptionItem").render(someData).appendTo("#mySelect");

我在博客中详细介绍了这种方法。

---

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

因此，与其在循环中添加每个项，不如在循环中收集项并在完成后追加它。

1 2 3

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

追加它，

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

甚至更好

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

相关讨论

• $('select摼id').html(items)；完全按照我想要的方式工作。使用append，它将继续在所有onchange事件中追加项目。非常感谢。

---

简单的方法是：

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

相关讨论

• 我已经建立了我的选项列表，所以填充选择字段就像威拉德说的那样简单。

---

与其到处重复相同的代码，我建议您最好编写自己的jquery函数，比如：

1 2 3

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

然后，要添加选项，只需执行以下操作：

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

相关讨论

• 你能详细解释一下吗？

---

在"一行"中，在前两个答案之间进行某种妥协：

1 2 3 4 5 6 7

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

使用map构建一个选项元素数组，然后使用apply将它们全部附加到select中，将每个选项作为append函数上的单独参数发送。

---

$.each比for循环慢

每次，dom选择都不是循环$("#mySelect").append();中的最佳实践。

所以最好的解决办法是

如果json数据resp是

1 2 3 4 5 6 7 8

[     {"id":"0001","name":"Mr. P <div class="suo-content">[collapse title=""]<ul><li><wyn>emp_id</wyn>在哪里？</li></ul>[/collapse]</div><hr>[cc lang="javascript"]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一起使用的完整文章，请访问：http://www.codecapers.com/post/dynamic-select-lists-with-mvc-and-jquery.aspx

---

Although the previous answers are all valid answers - it might be advisable to append all these to a documentFragmnet first, then append that document fragment as an element after...

See John Resig's thoughts on the matter...

Something along the lines of:

1 2 3 4 5 6 7 8 9 10 11 12 13

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

---

另一种方法是：

1 2 3 4 5 6 7 8

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

相关讨论

• 我知道你在这里做了什么…你接受了建议缓存$('#mySelect')，然后重构@rocktheroad-answer…不管怎样，这是更实际的解决方案

---

在chrome(jquery 1.7.1)中，这个解决方案存在排序问题(chrome按名称/编号对对象属性排序？)所以为了维持秩序(是的，这是滥用对象)，我改变了这一点：

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

对此

1 2 3 4 5 6 7 8

optionValues0 = {"1": {id:"4321", value:"option 1 <hr>[cc lang="javascript"]if (data.length != 0) {     var opts ="";     for (i in data)         opts +="<option value='"+data[i][value]+"'>"+data[i][text]+"</option>";     $("#myselect").empty().append(opts); }

这只在第一次构建一个巨大的字符串之后操作一次DOM。

相关讨论

• 您可以进一步优化这一点，并通过用getElementById('myselect').innerHtml = opts;替换$("#myselect").empty().append(opts);来避免使用jquery。

---

您可以使用以下代码迭代JSON数组

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

---

可以在以下位置找到jquery插件：http://remysharp.com/2007/01/20/auto-poputing select box using jquery ajax/。

---

这就是我对二维数组所做的：第一列是项目i，添加到的innerHTML中。第二列是记录i，添加到的value中：

PHP

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16

$items = $dal->get_new_items(); // Gets data from the database $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);

JavaScript／Ajax

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

function ddl_items() {             if (window.XMLHttpRequest) {                 // Code for Internet Explorer 7+, Firefox, Chrome, Opera, and Safari                 xmlhttp=new XMLHttpRequest();             }             else{                 // Code for Internet Explorer 6 and Internet Explorer 5                 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();     } }

相关讨论

• 看起来不错。可惜它没有使用jquery。另外，我以前也遇到过select.options.add()方法的问题。我记不起哪个浏览器和具体的问题，但我决定从中走出来，让jquery处理这些差异。
• 我对php和jquerry完全没有兴趣，但是上面的代码在所有浏览器中都有效。唯一的问题是，它在iPhone上不能很好地工作，我发布了一个关于它的问题，到目前为止还不走运：(stackoverflow.com/question s/11364040/&hellip；

---

JSON格式：

1 2 3 4 5 6 7

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

以及jquery代码，用于在Ajax成功时将值填充到下拉列表中：

1 2 3 4 5 6 7 8 9 10 11 12

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 }

---

使用$.map()函数，您可以更优雅地执行此操作：

1 2 3

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

相关讨论

• 这有点简短，但唯一的问题是处理被接受的答案所做的val和key var的转义。

---

我发现这很简单而且效果很好。

1 2 3

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

---

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33

<!DOCTYPE html> <html lang="en"> <head>   append selectbox using jquery   <meta charset="utf-8">   <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js">   <script type="text/javascript">     function setprice(){         var selectValues = {"1":"test 1","2":"test 2" };         $.each(selectValues, function(key, value) {        $('#mySelect')          .append($("<option></option>")                     .attr("value",key)                     .text(value)); });     }   </head> <body onloadx="setprice();">       <select class="form-control" id="mySelect">     <option>1</option>     <option>2</option>     <option>3</option>     <option>4</option>   </select> </body> </html>

相关讨论

• 对于堆栈溢出，最好添加一个解释，说明解决方案应该工作的原因。有关更多信息，请阅读如何回答。

---

将HTML select id设置为下面的行。在这里，mySelect用作select元素的ID。

1	var options = $("#mySelect");

然后获取这个场景中的selectValues对象，并为每个循环将其设置为jquery。它将相应地使用对象的值和文本，并将其附加到选项选择中，如下所示。

1 2 3 4 5

$.each(selectValues, function(val, text) {             options.append(              $('<option></option>').val(val).html(text)           );       });

当选择下拉列表时，这将显示文本作为选项列表，一旦选择了文本，将使用所选文本的值。

如。

"1"："测试1"，"2"："测试2"，

下拉，

显示名称：测试1->值为1显示名称：测试2->值为2

相关讨论

• 请描述一下解决方案。

---

我决定插嘴一下。

处理之前选择的选项；当我们附加

用append只命中一次dom

在添加更多选项的同时，处理multiple属性

演示如何使用对象

演示如何使用对象数组进行映射

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47

// objects as value/desc let selectValues = {  "1":"test 1",  "2":"test 2",  "3":"test 3",  "4":"test Four" }; //use div here as using"select" mucks up the original selected value in"mySelect" let opts = $(""); let opt = {}; $.each(selectValues, function(value, desc) {   opts.append($('<option />').prop("value", value).text(desc)); }); opts.find("option").appendTo('#mySelect'); // array of objects called"options" in an object let selectValuesNew = {   options: [{       value:"1",       description:"2test 1"     },     {       value:"2",       description:"2test 2",       selected: true     },     {       value:"3",       description:"2test 3"     },     {       value:"4",       description:"2test Four"     }   ] }; //use div here as using"select" mucks up the original selected value let opts2 = $(""); let opt2 = {}; //only append after adding all options $.map(selectValuesNew.options, function(val, index) {   opts2.append($('<option />')     .prop("value", val.value)     .prop("selected", val.selected)     .text(val.description)); }); opts2.find("option").appendTo('#mySelectNew');

1 2 3 4 5 6 7 8

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"> <select id="mySelect">   <option value="" selected="selected">empty</option> </select> <select id="mySelectNew" multiple="multiple">   <option value="" selected="selected">2empty</option> </select>

---

实际上，为了获得更好的性能，最好单独制作选项列表并附加到select id。

1 2 3 4 5 6

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

http://learn.jquery.com/performance/append-outside-loop/

---

因为jquery的append可以用数组作为参数，所以我很惊讶没有人建议用map将其作为一行。

1	$('#the_select').append(['a','b','c'].map(x => $('<option>').text(x)));

或reduce。

1	['a','b','c'].reduce((s,x) => s.append($('<option>').text(x)), $('#the_select'));

---

I combine the two best answers into a great answer.

1 2 3 4 5 6 7

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

---

1 2 3 4 5

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

---

• 关于javascript：如何删除选择框的所有选项，然后添加一个选项并使用jQuery选择它？
• 在javascript中深度克隆对象最有效的方法是什么？
• 关于javascript：在jQuery中添加表行
• 如何从javascript对象中删除属性？
• 关于javascript：如何通过jquery知道选择了哪个单选按钮？
• 关于javascript：如何在jquery中选择具有多个类的元素？
• 关于javascript：使用jquery从下拉列表(选择框)中获取所选文本
• 关于javascript：什么是检测移动设备的最佳方法？
• 关于javascript：jQuery从Dropdown获取选定的选项

Copyright ©  码农家园 联系：[email protected]