用 jQuery 作为 JS 对象从选项中添加选项的最佳方法是什么?

使用 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()的第二个参数。

答案

与其他答案相同,采用 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": "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>

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构造函数显然是可行的方法,这是一种可读有效的解决方案

$(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 的答案

似乎纯.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);
});

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

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

警告... 我在 Android 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);