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


当前回答

还有一种方法:

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

其他回答

大多数其他答案使用each函数对selectValues进行迭代。这需要为每个元素调用append,并在单独添加每个元素时触发回流。

将此答案更新为更惯用的函数方法(使用现代JS)可以形成为只调用append一次,使用map和option元素构造函数创建一个option元素数组。

使用OptionDOM元素应该可以减少函数调用开销,因为在创建后不需要更新Option元素,也不需要运行jQuery的解析逻辑。

$('mySelect').append($.map(selectValues, (k, v) => new Option(k, v)))

如果您创建一个将新建选项对象的工厂实用程序函数,则可以进一步简化此过程:

const newoption = (...args) => new Option(...args)

然后,这可以直接提供给地图:

$('mySelect').append($.map(selectValues, newoption))

以前的公式

因为append还允许将值作为可变数量的参数传递,所以我们可以预先创建选项元素映射列表,并使用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)))

所有这些答案似乎都不必要地复杂。您只需要:

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

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

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的动态选择列表

这就是我对二维数组所做的:第一列是项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();}}

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()方法中进行了一些解析)