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

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

我正在寻找不需要插件的东西,但是我也对那里的插件感兴趣。

这是我所做的:

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

小胖泡芙2020/03/09 21:08:56

可以在这里找到jQuery插件:使用jQuery和AJAX自动填充选择框

Tom米亚2020/03/09 21:08:56
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。

神奇Harry2020/03/09 21:08:56

尽管先前的答案都是有效答案-建议您首先将所有这些附加到documentFragmnet,然后在...之后将该文档片段作为元素附加...

看看约翰·雷西格对此事的想法 ...

类似于以下内容:

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);
番长GreenL2020/03/09 21:08:56

目前正在提议一种使用Microsoft模板化方法的方法,以将其包含在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");

在博客中更详细地这种做法。

三分糖就好2020/03/09 21:08:56

完善@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
);
JimEva神奇2020/03/09 21:08:56

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