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

与其他答案相同，采用 jQuery 方式：

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

---

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()方法）

---

这稍微更快更干净。

var selectValues = {“1”：“测试 1”，“2”：“测试 2”}; var $mySelect = $('#mySelect'); // $.each(selectValues, function(key, value) { var $option = $("", { value: key, text: value }); $mySelect.append($option); }) ;

---

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

---

如果您不必支持旧的 IE 版本，使用 Option constructor 显然是要走的路，a readable and efficient solution：

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

它在功能上等同于，但比：

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

---

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

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

---

旧 @joshperry's answer 的改进：

似乎普通的 .append 也可以按预期工作，

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

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

或更短，

$("#mySelect").append(
  $.map(selectValues, (v,k) => $("<option>").val(k).text(v))
  // $.map(selectValues, (v,k) => new Option(v, k)) // using plain JS
);

---

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

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

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

---

请注意...我在 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);

---

 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

---

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

首先包含模板 js 文件，可从 github 获得。

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

我blogged更详细地介绍了这种方法。

---

我做了这样的东西，loading a dropdown item via Ajax。上面的响应也是可以接受的，但是尽可能少地修改 DOM 以获得更好的性能总是好的。

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

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

附加它，

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

甚至更好

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

---

简单的方法是：

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

---

大多数其他答案使用 each 函数来迭代 selectValues。这需要为每个元素调用 append ，并且在单独添加每个元素时触发重排。

将此答案更新为更惯用的功能方法（使用现代 JS）可以形成为仅调用一次 append，并使用 map 创建一个 option 元素数组和一个 Option 元素构造函数。

使用 Option DOM 元素应减少函数调用开销，因为 option 元素在创建后不需要更新，并且 jQuery 的解析逻辑不需要运行。

$('mySelect').append($.map(selectValues, (k, v) => new Option(k, v)))

如果您创建一个新的选项对象的工厂实用程序函数，这可以进一步简化：

const newoption = (...args) => new Option(...args)

然后可以直接将其提供给 map：

$('mySelect').append($.map(selectValues, newoption))

以前的配方

因为 append 还允许将值作为可变数量的参数传递，所以我们可以预先创建 option 元素列表 map 并使用 apply 在单个调用中将它们作为参数附加。

$.fn.append.apply($('mySelect'), $.map(selectValues, (k, v) => $("<option/>").val(k).text(v)));

看起来在更高版本的 jQuery 中，append 也接受一个数组参数，这可以稍微简化一下：

$('mySelect').append($.map(selectValues, (k, v) => $("<option/>").val(k).text(v)))

---

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 Select Lists with MVC and jQuery

---

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

---

我建议不要在任何地方重复相同的代码，而是编写自己的 jQuery 函数，例如：

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

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

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

---

您可以使用以下代码迭代您的 json 数组

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

---

$.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.length; i++) {
    option += "<option value='" + resp[i].id + "'>" + resp[i].name + "</option>";
}
$('#mySelect').html(option);

---

还有另一种方法：

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

---

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。

---

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

PHP $items = $dal->get_new_items(); // 从数据库中获取数据 $items_arr = array(); $i = 0; foreach ($item as $item) { $first_name = $item->first_name; $last_name = $item->last_name; $date = $item->日期； $show = $first_name 。 “”。 $姓氏。 “，”。 $日期； $request_id = $request->request_id; $items_arr[0][$i] = $show; $items_arr[1][$i] = $request_id; $i++; } 回声 json_encode($items_arr); JavaScript/Ajax function ddl_items() { if (window.XMLHttpRequest) { // Internet Explorer 7+、Firefox、Chrome、Opera 和 Safari 的代码 xmlhttp=new XMLHttpRequest(); } else{ // Internet Explorer 6 和 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

---

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

请参阅John Resig's thoughts on the matter...

类似于以下内容：

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

---

可以在此处找到 jQuery 插件：Auto-populating Select Boxes using jQuery & AJAX。

---

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

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

---

JSON 格式：

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

以及用于在 Ajax 成功时将值填充到 Dropdown 的 jQuery 代码：

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() 函数，您可以以更优雅的方式执行此操作：

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

---

<!DOCTYPE html>
<html lang="en">
<head>
  <title>append selectbox using jquery</title>
  <meta charset="utf-8">
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

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

    }
  </script>
</head>
<body onload="setprice();">


      <select class="form-control" id="mySelect">
    <option>1</option>
    <option>2</option>
    <option>3</option>
    <option>4</option>
  </select>


</body>
</html>

---

我将两个最佳答案组合成一个很好的答案。

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

---

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

---