【问题标题】：What is the best way to add options to a select from a JavaScript object with jQuery?使用 jQuery 从 JavaScript 对象中添加选项的最佳方法是什么？
【发布时间】：2023-03-20 23:26:01
【问题描述】：

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

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

这就是我所做的：

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

for (key in selectValues) {
  if (typeof (selectValues[key] == 'string') {
    $('#mySelect').append('<option value="' + key + '">' + selectValues[key] + '</option>');
  }
}

干净/简单的解决方案：

这是一个经过清理和简化的version of matdumsa's：

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

与 matdumsa 的更改：(1) 删除了 append() 中选项的关闭标记，(2) 将属性/属性作为 append() 的第二个参数移动到映射中。

【问题讨论】：

也许有帮助：texotela.co.uk/code/jquery/select（在我偶然发现这个问题后，这对我很有帮助）
上面列出的清理版本仅适用于 Jquery 1.4+。对于旧版本，请使用 matdumsa 的答案中的那个
{ value : key } 应该是 { "value" : key } 如 matdumsa 的回答所示。
我不这么认为，因为value 是一个字符串（并且是硬编码的），它不需要被引用。
标题应该改为“使用 jQuery 从 JSON 对象中添加选项的最佳方法是什么？

标签： javascript jquery html-select

【解决方案1】：

 $.each(response, function (index,value) {
                        $('#unit')
                            .append($("<option></option>")
                                .attr("value", value.id)
                                .text(value.title));
                    });

【讨论】：

【解决方案2】：

纯 JS

在纯 JS 中添加下一个选项来选择更容易更直接

mySelect.innerHTML+= `<option value="${key}">${value}</option>`;

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

for(let key in selectValues) { 
  mySelect.innerHTML+= `<option value="${key}">${selectValues[key]}</option>`;
}

<select id="mySelect">
  <option value="0" selected="selected">test 0</option>
</select>

【讨论】：

【解决方案3】：

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

$.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/… 的第 3 点和第 6 点

【解决方案4】：

获取对象键以获取对象值。使用 map() 添加新选项。

const selectValues = {
  "1": "test 1",
  "2": "test 2"
}
const selectTest = document.getElementById('selectTest')
Object.keys(selectValues).map(key => selectTest.add(new Option(selectValues[key], key)))

&lt;select id="selectTest"&gt;&lt;/select&gt;

【讨论】：

【解决方案5】：

一个 jQuery 插件可以在这里找到：Auto-populating Select Boxes using jQuery & AJAX。

【讨论】：

【解决方案6】：

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

【讨论】：

【解决方案7】：

旧版@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
);

【讨论】：

【解决方案8】：

大多数其他答案使用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)))

【讨论】：

【解决方案9】：

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

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

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

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

【讨论】：

【解决方案10】：

这样更快更干净。

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

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

【讨论】：

它认为缓存 `$('#mySelect')` 会更好，这样你在循环之前只查找一次。目前它正在 DOM 中搜索每个选项的元素。

【解决方案11】：

由于 JQuery 的 append 可以将数组作为参数，我很惊讶没有人建议使用 map 将其作为单行符

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

或reduce

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

【讨论】：

【解决方案12】：

实际上，为了提高性能，最好单独制作选项列表并附加到选择id。

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/

【讨论】：

【解决方案13】：

我决定插话一下。

处理先前选择的选项；当我们追加时，一些浏览器会搞砸
仅使用附加访问 DOM 一次
在添加更多选项的同时处理multiple 属性
展示如何使用对象
展示如何使用对象数组进行映射

// 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 = $("<div />");
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 = $("<div />");
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');

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

<select id="mySelectNew" multiple="multiple">
  <option value="" selected="selected">2empty</option>
</select>

【讨论】：

【解决方案14】：

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

【讨论】：

【解决方案15】：

将您的 HTML 选择 ID 设置为下面的行。这里mySelect 用作选择元素的id。

   var options = $("#mySelect");

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

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

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

例如。

"1": "测试 1", "2": "测试 2",

下拉菜单，

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

【讨论】：

请描述一下解决方案。

【解决方案16】：

<!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>

【讨论】：

【解决方案17】：

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

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

【讨论】：

这有点短，但一个问题是处理接受的答案所做的 val 和 key vars 的转义。

【解决方案18】：

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
}

【讨论】：

【解决方案19】：

与其在所有地方重复相同的代码，我建议编写自己的 jQuery 函数更可取：

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

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

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

【讨论】：

【解决方案20】：

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

【讨论】：

【解决方案21】：

虽然前面的答案都是有效的答案 - 最好先将所有这些附加到一个 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);

【讨论】：

【解决方案22】：

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

PHP

$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

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

【讨论】：

【解决方案23】：

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 也更少。
如果 key 有一些引号或 >, < 在其中，则会中断。

【解决方案24】：

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

【讨论】：

【解决方案25】：

简单的方法是：

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

【讨论】：

【解决方案26】：

 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

【讨论】：

【解决方案27】：

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

【讨论】：

【解决方案28】：

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

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

完全跨浏览器兼容。

【讨论】：

【解决方案29】：

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

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

【讨论】：

【解决方案30】：

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 进行一次操作。

【讨论】：

您可以通过将$("#myselect").empty().append(opts); 替换为getElementById('myselect').innerHtml = opts; 来进一步优化并完全避免使用jQuery