javascript - 使用 jQuery 从 JavaScript 对象中添加选项的最佳方法是什么？

Question

<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() 的第二个参数移动到映射中。

score 1448 · Accepted Answer

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

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

score 285 · Accepted Answer

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()方法）~~

score 210 · Accepted Answer

这稍微更快更干净。

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>

score 106 · Accepted Answer

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

score 40 · Accepted Answer

如果您不必支持旧的 IE 版本，使用Option构造函数显然是要走的路，一个可读且高效的解决方案：

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

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

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

score 32 · Accepted Answer

这看起来更好，提供了可读性，但比其他方法慢。

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

score 24 · Accepted Answer

对较旧的@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
);

score 21 · Accepted Answer

所有这些答案似乎都不必要地复杂。所有你需要的是：

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

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

score 19 · Accepted Answer

 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

score 19 · Accepted Answer

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

score 16 · Accepted Answer

有一种使用Microsoft Templating 方法的方法，目前正在提议将其包含到 jQuery 核心中。使用模板功能更强大，因此对于最简单的场景，它可能不是最佳选择。有关更多详细信息，请参阅 Scott Gu 的文章概述了这些功能。

首先包含模板 js 文件，可从github获得。

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

我已经在博客中更详细地介绍了这种方法。

score 14 · Accepted Answer

我做了这样的事情，通过 Ajax 加载一个下拉项。上面的响应也是可以接受的，但是尽可能少地修改 DOM 以获得更好的性能总是好的。

因此，与其在循环中添加每个项目，不如在循环中收集项目并在完成后附加它。

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

附加它，

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

甚至更好

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

score 11 · Accepted Answer

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 使用动态列表的完整文章，请访问：

使用 MVC 和 jQuery 的动态选择列表

score 11 · Accepted Answer

简单的方法是：

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

score 11 · Accepted Answer

大多数其他答案都使用该each函数来迭代selectValues. 这需要为每个元素调用 append ，并且在单独添加每个元素时触发重排。

将这个答案更新为更惯用的功能方法（使用现代 JS）可以形成append只调用一次，并option使用map和Option元素构造函数创建元素数组。

使用OptionDOM 元素应该减少函数调用开销，因为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元素列表映射并将它们作为参数附加到单个调用中，使用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)))

score 9 · Accepted Answer

Chrome (jQuery 1.7.1) 中的这个解决方案存在排序问题（Chrome 按名称/编号对对象属性进行排序？）所以为了保持顺序（是的，这是对象滥用），我改变了这个：

optionValues0 = {"4321": "option 1", "1234": "option 2"};

对此

optionValues0 = {"1": {id: "4321", value: "option 1"}, "2": {id: "1234", value: "option 2"}};

然后 $.each 看起来像：

$.each(optionValues0, function(order, object) {
  key = object.id;
  value = object.value;
  $('#mySelect').append($('<option>', { value : key }).text(value));
});

score 9 · Accepted Answer

我建议不要在任何地方重复相同的代码，而是编写自己的 jQuery 函数，例如：

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

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

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

score 8 · Accepted Answer

您可以使用以下代码迭代您的 json 数组

$('<option/>').attr("value","someValue").text("Option1").appendTo("#my-select-id");

score 8 · Accepted Answer

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

score 7 · Accepted Answer

7

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

于 2010-12-24T16:23:44.287 回答

score 7 · Accepted Answer

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

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

score 7 · Accepted Answer

尽管之前的答案都是有效的答案 - 最好先将所有这些附加到 documentFragmnet，然后将该文档片段作为元素附加到...

请参阅John Resig 对此事的看法......

类似于以下内容：

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

score 7 · Accepted Answer

还有另一种方法：

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

score 7 · Accepted Answer

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。

score 6 · Accepted Answer

我发现这很简单而且效果很好。

for (var i = 0; i < array.length; i++) {
    $('#clientsList').append($("<option></option>").text(array[i].ClientName).val(array[i].ID));
};

score 5 · Accepted Answer

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
}

score 4 · Accepted Answer

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

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

score 3 · Accepted Answer

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

score 2 · Accepted Answer

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

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

score 2 · Accepted Answer

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

score 2 · Accepted Answer

将您的 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

score 2 · Accepted Answer

实际上，为了获得更好的性能，最好单独制作选项列表并附加到选择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/

score 1 · Accepted Answer

我决定插话一点。

处理先前选择的选项；一些浏览器在我们追加时搞砸了
只用附加击打 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>

score 1 · Accepted Answer

由于 JQueryappend可以将数组作为参数，我很惊讶没有人建议使用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'));

score 1 · Accepted Answer

获取对象键以获取对象值。使用 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)))

<select id="selectTest"></select>

score 1 · Accepted Answer

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

score 0 · Accepted Answer

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

javascript - 使用 jQuery 从 JavaScript 对象中添加选项的最佳方法是什么？

37 回答 37

jQuery

香草 JavaScript

纯JS

Related

Reference