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

@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..? — Kieron, Oct 01 '09 at 09:06
Based on @Richard and @karim79's answers...I got it to work. I can still put the markup here if you'd like. — Scott, Oct 01 '09 at 09:11
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. — Scott, Oct 01 '09 at 09:12

RaYell · Answer 1 · 2010-04-07T14:01:11.650

49

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

edited Apr 07 '10 at 14:01

answered Oct 01 '09 at 08:40

RaYell

69,610
20
126
152

1

RaYell...I ended up using your method. I have more control with this. Thanks a lot! – Scott Oct 01 '09 at 09:53
@SyaZ Yup, that was a typo. Thx for finding it. – RaYell Apr 07 '10 at 14:01

Richard · Answer 2 · 2009-10-01T09:23:21.013

16

This should work:

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

edited Oct 01 '09 at 09:23

answered Oct 01 '09 at 08:40

Richard

21,728
13
62
101

This works great...I ended going with @RaYell's method. I have greater control of how much data is brought in. Thanks!!! – Scott Oct 01 '09 at 09:55

score 3 · Answer 3 · answered Oct 01 '09 at 08:55

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

score 3 · Accepted Answer · edited May 23 '17 at 12:31

3

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!!

edited May 23 '17 at 12:31

Community

1
1

answered Oct 01 '09 at 09:57

Scott

823
4
11
21

Alex Gyoshev · Answer 5 · 2009-10-01T10:32:09.940

0

You can use a for loop.

for (var i = 0, len = data.length; i < len; i++)
    $("select.month")
         .append("<option value=" + data[i].monthID + ">" + data[i].month + "</option>");

If you want to achieve maximum performance, you should reduce the DOM operations to a minimum, like this:

var html = [];

for (var i = 0, len = data.length; i < len; i++) {
    html[html.length] = "<option value=";
    html[html.length] = data[i].monthID;
    html[html.length] = ">";
    html[html.length] = data[i].month;
    html[html.length] = "</option>";
}

$("select.month").append(html.join(''));

edited Oct 01 '09 at 10:32

answered Oct 01 '09 at 08:40

Alex Gyoshev

11,929
4
44
74

You have a syntax error in the last example, you should remove the ) after "" – googletorp Oct 01 '09 at 09:10
@googletorp thanks. I managed to get it working...I appreciate it. – Scott Oct 01 '09 at 09:16

Jquery getJSON populate select menu question

5 Answers5

Linked

Related