Jquery getJSON populate select menu question

Question

I am populating a select menu with getJSON. I am wondering if there's a way that I can use jQuery's .each function to bring in these values?

Surely there must be an easier way to accomplish this...maybe?

PHP file:

<?php     $queryMonth = "SELECT monthID, month FROM months";     $result = $db->query($queryMonth);        while($rowMonth = $db->fetch_assoc($result)) :         $data[] = $rowMonth;       endwhile;      echo json_encode($data); ?> 

The 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>"); }); 

My json output looks like this:

[{   "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" }] 

Answer 1

$.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); }); 

Storing the HTML code in a variable and appending it only once at the end is very important if you care about your app performance.

Answer 2

This should work:

   $.getJSON('selectMenus.php', function(data){         $.each(data, function(index,item) {            $("select.month").append("<option value=" + item.monthID + ">" + item.month + "</option>");      });     });