使用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)的第二个参数移动到映射中。
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
}
将HTML选择id设置为以下行。在这里,mySelect用作select元素的id。
var options = $("#mySelect");
然后获取这个场景中的selectValues对象,并将其设置为每个循环的jquery。它将相应地使用对象的值和文本,并将其附加到选项选择中,如下所示。
$.each(selectValues, function(val, text) {
options.append(
$('<option></option>').val(val).html(text)
);
});
当选择下拉列表时,这将显示文本作为选项列表,一旦选择文本,将使用所选文本的值。
Eg.
“1”:“测试1”,“2”:“测试2”,
下拉列表,
显示名称:测试1->值为1显示名称:测试2->值为2
我做了类似的事情,通过Ajax加载一个下拉项。上面的响应也是可以接受的,但是为了更好的性能,尽可能少地修改DOM总是很好的。
因此,与其在循环中添加每个项目,不如在循环中收集项目,并在完成后将其追加。
$(data).each(function(){
... Collect items
})
附加它,
$('#select_id').append(items);
甚至更好
$('#select_id').html(items);