Jquery getJSON填充选择菜单问题

前端之家收集整理的这篇文章主要介绍了Jquery getJSON填充选择菜单问题前端之家小编觉得挺不错的,现在分享给大家,也给大家做个参考。
我正在使用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代码存储在变量中,并将其附加到最后一次是非常重要的。

猜你在找的jQuery相关文章