如何使用jQuery从JavaScript对象中添加选项到一个下拉列表(select)的最佳方式是什么？

Question

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

一个简洁/简单的解决方案：

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

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

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

Changes from matdumsa's: (1) removed the close tag for the option inside append() and (2) moved the properties/attributes into an map as the second parameter of append().

- Darryl Hein

---

或许对你有帮助：http://www.texotela.co.uk/code/jquery/select/（在我遇到这个问题后，它对我很有帮助） - ManBugra

上面列出的清理过的版本只适用于Jquery 1.4+。对于旧版本，请使用matdumsa答案中的版本。 - Thedric Walker

{ value : key } 应该改为 { "value" : key }，如 matdumsa 的回答所示。 - Nick P

我不这么认为，因为value是一个字符串（并且是硬编码的），所以它不需要加引号。 - Darryl Hein

也许这会对你有所帮助 - http://www.kvcodes.com/2016/10/add-append-insertoptions-select-options-using-jquery-javascript/ - Kvvaradha

标题应该改为“使用jQuery从JSON对象中添加选项到选择框的最佳方法是什么？” - Dr Fred

Answer 1

与其他答案相同，以jQuery风格实现：

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

- matdumsa

---

首先，我会将 $("#mySelect") 分配给一个变量，否则在循环中每次调用 $("#mySelect") 非常浪费资源，同时更新 DOM 也是如此。请参阅 http://www.artzstudio.com/2009/04/jquery-performance-rules/#cache-jquery-objects 中的第3点和第6点。 - Patrick

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内部（可能在html()方法中进行了某些解析）。

- gpilotino

---

你的方法显然比上面的“正确”答案更快，因为它使用了更少的jQuery。 - Teej

如果key中包含引号、大于号或小于号，这段代码将会出现问题。 - nickf

Answer 3

这样会稍微快一些，而且更加简洁。

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>

- ajevic

---

建议将 $('#mySelect') 缓存起来，在循环之前只查找一次。当前代码为每个选项都在 DOM 中搜索该元素，缓存可以提高效率。 - Sushanth --

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

- Carl Hörberg

Answer 5

如果你不需要支持旧版本的IE浏览器，使用Option构造函数是明显的选择，一种易读且高效的解决方案：

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

它在功能上相当于，但比以下代码更简洁：

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

- Nickolay

Answer 6

这种方法看起来更美观易读，但速度比其他方法慢。

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

如果你想要速度，最快的方法（已经测试！）是使用数组而不是字符串连接，并仅使用一个append调用。

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

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

- m1sfit

Answer 7

对老的@joshperry回答的改进:

看起来普通的.append也能正常工作，

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

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

< p >或者更短,< /p >

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

- mpapec

Answer 8

所有这些回答都显得不必要复杂。你只需要:

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

这完全兼容所有浏览器。

- Animism

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

我做了几个测试，我认为这是最快的方法。:P

- Teej

Answer 10

提醒一下...我在一个安卓2.2 (Cyanogen 7.0.1)手机（T-Mobile G2）上使用jQuery Mobile 1.0b2和PhoneGap 1.0.0，但无法使.append()方法工作。我不得不像以下这样使用.html():

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

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

- Jack Holt