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

当前回答

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

其他回答

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

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

2010-07-21 16:14:14

JSON格式：

[{
    "org_name": "Asset Management"
}, {
    "org_name": "Debt Equity Foreign services"
}, {
    "org_name": "Credit Services"
}]

以及jQuery代码，用于填充Ajax成功时下拉列表的值：

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
}

2016-07-30 10:43:29

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

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

2017-07-10 18:24:54

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

2021-10-22 05:44:29

纯JS

在纯JS中，添加下一个选项来选择更容易、更直接

mySelect.innerHTML+= `<option value="${key}">${value}</option>`;

让selectValues＝｛“1”：“test 1”，“2”：“test2”｝；for（输入selectValues）｛mySelect.innerHTML+=`<option value=“$｛key｝”>$｛selectValues[key]｝</option>`；}<select id=“mySelect”><option value=“0”selected=“selected”>测试0</option></选择>

2020-08-25 20:09:18

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

推荐文章

最新文章

标签