使用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()内选项的close标记,(2)将财产/属性作为append)的第二个参数移动到映射中。


当前回答

有一种使用MicrosoftTemplateing方法的方法,目前正在提议将其纳入jQuery核心。使用模板功能更强大,因此对于最简单的场景,它可能不是最佳选项。有关更多详细信息,请参阅Scott Gu概述这些功能的帖子。

首先包括github提供的模板js文件。

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

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

其他回答

简单的方法是:

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

对老@joshberry的回答进行了改进:

看起来plain.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
);

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

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

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

附加它,

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

甚至更好

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

我把两个最好的答案组合成一个好答案。

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