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

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

当前回答

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

2018-09-06 05:20:04

其他回答

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

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

2009-12-21 15:50:52

function populateDropdown(select, data) {   
    select.html('');   
    $.each(data, function(id, option) {   
        select.append($('<option></option>').val(option.value).html(option.name));   
    });          
}

它与jQuery1.4.1配合得很好。

有关在ASP.NET MVC和jQuery中使用动态列表的完整文章，请访问：

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

2010-02-05 11:56:17

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

$（'<option/>'）.attr（“value”，“someValue”）.text（“Option1”）.appendTo（“#my select id”）；

2010-07-21 16:14:14

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

PHP文件$items=$dal->get_new_items（）；//从数据库获取数据$items_arr=数组（）；$i=0；foreach（$items作为$item）{$first_name=$item->first_name；$last_name=$item->last_name；$date=$item->date；$show=$first_name。" " . $姓氏。", " . $日期$request_id=$request->request_id；$items_arr[0][$i]=$show；$items_arr[1][$i]=$request_id；$i++；}echo json_encode（$items_arr）；JavaScript/Ajax函数ddl_items（）{if（window.XMLHttpRequest）{//Internet Explorer 7+、Firefox、Chrome、Opera和Safari的代码xmlhttp=new XMLHttpRequest（）；}其他{//Internet Explorer 6和Internet Explorer 5的代码xmlhttp=新ActiveXObject（“Microsoft.xmlhttp”）；}xmlhttp.onreadystatechange=函数（）{如果（xmlhttp.readyState==4&&xmlhttp.status==200）{var arr=JSON.parse（xmlhttp.responseText）；var lstbx=document.getElementById（'my_listbox'）；对于（变量i=0；i<arr.length；i++）{var option=新选项（arr[0][i]，arr[1][i]）；lstbx.options.add（选项）；}}};xmlhttp.open（“GET”，“Code/GET_items.php？dummy_time=”+new Date（）.getTime（）+“”，true）；xmlhttp.send（）；}}

2012-08-09 19:08:56

有一种使用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");

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

2010-07-08 05:00:35

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

推荐文章

最新文章

标签