Jquery getJSON populate select menu question

javascript jquery json ajax getjson

50,116

Solution 1

Using @RaYell's method....this is what worked for me:

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

Thanks to everyone for your help on this!!

Solution 2

$.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.

Solution 3

This should work:

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

Solution 4

From the great book jQuery in Action,here is a way to do what you want writing a custom jQuery command:

(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);

And then:

$.getJSON('selectMenus.php', 
   function(data){
      $("select.month").loadSelect(data);
   }
);

View more solutions

50,116

Scott

Updated on July 09, 2022

Comments

Scott almost 2 years

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

belugabob over 14 years

Can we see the markup for your select boxes?
Kieron over 14 years

@Scott, all of your comments are saying the select menus are empty. Have you verified that your selector is correct and actually returning the element(s) you're trying to alter..?
Scott over 14 years

Based on @Richard and @karim79's answers...I got it to work. I can still put the markup here if you'd like.
Scott over 14 years

I had a few missing curly braces...that's why they were coming up empty. Operator error...and I'm a noob with this jQuery stuff.
Alejandro García Iglesias almost 13 years

Some say jQuery is killing JavaScript programming...

googletorp over 14 years

You have a syntax error in the last example, you should remove the ) after "</option>"
Scott over 14 years

@googletorp thanks. I managed to get it working...I appreciate it.
Scott over 14 years

RaYell...I ended up using your method. I have more control with this. Thanks a lot!
Scott over 14 years

This works great...I ended going with @RaYell's method. I have greater control of how much data is brought in. Thanks!!!
RaYell about 14 years

@SyaZ Yup, that was a typo. Thx for finding it.