我正在用getJSON填充选择菜单。我想知道是否有一种方法可以使用jQuery的.each函数引入这些值?
当然,必须有一种更简单的方法来完成此操作……也许?
PHP文件:
<?php
$queryMonth = "SELECT monthID, month FROM months";
$result = $db->query($queryMonth);
while($rowMonth = $db->fetch_assoc($result)) :
$data[] = $rowMonth;
endwhile;
echo json_encode($data);
?>
jQuery:
$.getJSON('selectMenus.php', function(data) {
$("select.month").append("<option value=" + data[0].monthID + ">" + data[0].month + "</option>");
$("select.month").append("<option value=" + data[1].monthID + ">" + data[1].month + "</option>");
$("select.month").append("<option value=" + data[2].monthID + ">" + data[2].month + "</option>");
$("select.month").append("<option value=" + data[3].monthID + ">" + data[3].month + "</option>");
$("select.month").append("<option value=" + data[4].monthID + ">" + data[4].month + "</option>");
$("select.month").append("<option value=" + data[5].monthID + ">" + data[5].month + "</option>");
$("select.month").append("<option value=" + data[6].monthID + ">" + data[6].month + "</option>");
$("select.month").append("<option value=" + data[7].monthID + ">" + data[7].month + "</option>");
$("select.month").append("<option value=" + data[8].monthID + ">" + data[8].month + "</option>");
$("select.month").append("<option value=" + data[9].monthID + ">" + data[9].month + "</option>");
$("select.month").append("<option value=" + data[10].monthID + ">" + data[10].month + "</option>");
$("select.month").append("<option value=" + data[11].monthID + ">" + data[11].month + "</option>");
});
我的json输出看起来像这样:
[{
"monthID": "1",
"month": "January"
}, {
"monthID": "2",
"month": "February"
}, {
"monthID": "3",
"month": "March"
}, {
"monthID": "4",
"month": "April"
}, {
"monthID": "5",
"month": "May"
}, {
"monthID": "6",
"month": "June"
}, {
"monthID": "7",
"month": "July"
}, {
"monthID": "8",
"month": "August"
}, {
"monthID": "9",
"month": "Septemeber"
}, {
"monthID": "10",
"month": "October"
}, {
"monthID": "11",
"month": "November"
}, {
"monthID": "12",
"month": "December"
}]
$.getJSON('selectMenus.php', function(data){
var html = '';
var len = data.length;
for (var i = 0; i< len; i++) {
html += '<option value="' + data[i].monthId + '">' + data[i].month + '</option>';
}
$('select.month').append(html);
});
如果您关心应用程序的性能,则将HTML代码存储在变量中,并且最后仅将其附加一次非常重要。
这应该起作用:
$.getJSON('selectMenus.php', function(data){
$.each(data, function(index,item) {
$("select.month").append("<option value=" + item.monthID + ">" + item.month + "</option>");
});
});
从很棒的书jQuery in Action中,这是一种编写自定义jQuery命令的方法:
(function($) {
$.fn.emptySelect = function() {
return this.each(function(){
if (this.tagName=='SELECT') this.options.length = 0;
});
}
$.fn.loadSelect = function(optionsDataArray) {
return this.emptySelect().each(function(){
if (this.tagName=='SELECT') {
var selectElement = this;
$.each(optionsDataArray,function(index,optionData){
var option = new Option(optionData.caption,
optionData.value);
if ($.browser.msie) {
selectElement.add(option);
}
else {
selectElement.add(option,null);
}
});
}
});
}
})(jQuery);
然后:
$.getJSON('selectMenus.php',
function(data){
$("select.month").loadSelect(data);
}
);
使用@RaYell's方法。...这对我有用:
$.getJSON('months.php', function(data){
var html = '';
var len = data.length;
for (var i = 0; i < len; i++) {html += '<option value="' + data[i].monthId + '">' + data[i].month + '</option>';
}
$('select.month').append(html);
});
感谢大家在此方面的帮助!
您可以使用for
循环。
for (var i = 0, len = data.length; i < len; i++)
$("select.month")
.append("<option value=" + data[i].monthID + ">" + data[i].month + "</option>");
如果要获得最大的性能,应将DOM操作减少到最低,如下所示:
var html = [];
for (var i = 0, len = data.length; i < len; i++) {
html[html.length] = "<option value=";
html[html.length] = data[i].monthID;
html[html.length] = ">";
html[html.length] = data[i].month;
html[html.length] = "</option>";
}
$("select.month").append(html.join(''));