Jquery getJSON populate select menu 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:

Jquery getJSON populate select menu question

1 Answer

Your Answer