javascript - new - jquery set select options
使用jQuery將選項添加到JS對象的最佳方式是什麼? (20)
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));
}
使用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>');
}
}
乾淨/簡單的解決方案:
$.each(selectValues, function(key, value) {
$('#mySelect')
.append($('<option>', { value : key })
.text(value));
});
matdumsa的變化:(1)刪除append()和(2)中選項的close標籤,將屬性/屬性作為append()的第二個參數移動到地圖中。
-
$.each
比for
循環慢 - 每次DOM選擇都不是循環
$("#mySelect").append();
的最佳實踐$("#mySelect").append();
所以最好的解決方案如下
如果JSON數據是
[
{"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);
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));
});
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
}
使用$ .map()函數,你可以用更優雅的方式做到這一點:
$('#mySelect').html( $.map(selectValues, function(val, key){
return '<option value="' + val + '">'+ key + '</option>';
}).join(''));
使用DOM Elements Creator插件 (我的最愛):
$.create('option', {'value': 'val'}, 'myText').appendTo('#mySelect');
使用Option
構造函數(不確定瀏覽器支持):
$(new Option('myText', 'val')).appendTo('#mySelect');
使用document.createElement
(避免使用$("<option></option>")
解析HTML的額外工作$("<option></option>")
):
$('#mySelect').append($(document.createElement("option")).
attr("value","val").text("myText"));
另一種做法是:
var options = [];
$.each(selectValues, function(key, value) {
options.push($("<option/>", {
value: key,
text: value
}));
});
$('#mySelect').append(options);
我做了這樣的事情, 通過Ajax加載下拉項 。 上面的響應也是可以接受的,但為了獲得更好的性能,盡可能減少DOM修改總是很好的。
因此,不要在循環中添加每個項目,最好在循環中收集項目並在完成後追加它。
$(data).each(function(){
... Collect items
})
追加它,
$('#select_id').append(items);
甚至更好
$('#select_id').html(items);
我將兩個最佳答案結合成一個很好的答案。
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(''));
所有這些答案似乎都不必要的複雜。 所有你需要的是:
var options = $('#mySelect').get(0).options;
$.each(selectValues, function(key, value) {
options[options.length] = new Option(value, key);
});
這完全是跨瀏覽器兼容的。
有一種使用微軟模板方法的方法 ,目前這個方法已經被納入到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");
我已經更詳細地討論了這種方法。
與其他答案一樣,使用jQuery時尚:
$.each(selectValues, function(key, value) {
$('#mySelect')
.append($("<option></option>")
.attr("value",key)
.text(value));
});
被忽視......我在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);
這是更快,更乾淨。
$.each(selectValues, function(key, value) {
$('#mySelect').append($("<option/>", {
value: key,
text: value
}));
});
這看起來更好,提供可讀性,但比其他方法慢。
$.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(''));
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
$.each(selectValues, function(key, value) {
$('#mySelect').append($("<option/>", {
value: key, text: value
}));
});
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中使用動態列表的完整文章,請訪問: http://www.codecapers.com/post/Dynamic-Select-Lists-with-MVC-and-jQuery.aspx : http://www.codecapers.com/post/Dynamic-Select-Lists-with-MVC-and-jQuery.aspx
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一次。