Jquery getJSON填充选择菜单问题
我正在使用getJSON填充选择菜单。 我想知道是否有一种方法可以使用jQuery的.each函数来引入这些值？
当然必须有一种更简单的方法来完成这个……也许吧？
PHP文件：
query($queryMonth); while($rowMonth = $db->fetch_assoc($result)) : $data[] = $rowMonth; endwhile; echo json_encode($data); ?> jQuery：
$.getJSON('selectMenus.php', function(data){ $("select.month").append("" + data[0].month + ""); $("select.month").append("" + data[1].month + ""); $("select.month").append("" + data[2].month + ""); $("select.month").append("" + data[3].month + ""); $("select.month").append("" + data[4].month + ""); $("select.month").append("" + data[5].month + ""); $("select.month").append("" + data[6].month + ""); $("select.month").append("" + data[7].month + ""); $("select.month").append("" + data[8].month + ""); $("select.month").append("" + data[9].month + ""); $("select.month").append("" + data[10].month + ""); $("select.month").append("" + data[11].month + ""); });
我的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 += ''; } $('select.month').append(html); });
如果您关心应用程序性能，将HTML代码存储在变量中并在最后只添加一次非常重要。
这应该工作：
$.getJSON('selectMenus.php', function(data){ $.each(data, function(index,item) { $("select.month").append(""); }); });
从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的方法….这对我有用 ：
$.getJSON('months.php', function(data){ var html = ''; var len = data.length; for (var i = 0; i < len; i++) {html += ''; } $('select.month').append(html); });
感谢大家的帮助！
你可以使用for循环。
for (var i = 0, len = data.length; i < len; i++) $("select.month") .append("");
如果要实现最高性能，则应将DOM操作减少到最小，如下所示：
var html = []; for (var i = 0, len = data.length; i < len; i++) { html[html.length] = ""; } $("select.month").append(html.join(''));