0

I am attempting to populate a select list with items from my database. I have confirmed (with the use of an "alert()" box) that the jquery .getJSON function is fetching the correct data, but the select list is still not populating.

var selectBox = document.createElement("select");
$.getJSON('optionGrabber.php', function(data) {
    $.each(data, function(key, dbValue) {
        var option = document.createElement("option");
        option.setAttribute("value",dbValue);
        selectBox.appendChild(option);
    });
});
myDiv.appendChild(selectBox);

Like I said, when I stick an "alert(dbValue);" immediately after the ".each" statement, I get the correct data in the alert pop-ups.

Brian
  • 1,726
  • 2
  • 24
  • 62
  • Have you checked your code with firebug ? do you get any error? – Farshad Aug 29 '14 at 20:43
  • http://stackoverflow.com/questions/740195/adding-options-to-a-select-using-jquery-javascript – Aguardientico Aug 29 '14 at 20:43
  • @Farshad No errors in Firebug. – Brian Aug 29 '14 at 20:44
  • Nothing wrong with that, but you're mixing up jQuery with Vanilla Javascript. Why don't you follow a standard? http://jsfiddle.net/MelanciaUK/p38vu1x8/ – emerson.marini Aug 29 '14 at 20:45
  • @MelanciaUK I didn't want to use jQuery at all, but I figured I could use this little bit to help me out. – Brian Aug 29 '14 at 20:46
  • @MelanciaUK Nothing wrong with using jQuery with Vanilla JavaScript. – Spencer Wieczorek Aug 29 '14 at 20:47
  • @SpencerWieczorek That's exactly what I said. – emerson.marini Aug 29 '14 at 20:48
  • Take a look at this [link](http://stackoverflow.com/questions/5155467/auto-populating-select-boxes-using-jquery-and-ajax-not-working-in-anything-new) may be useful for your case – Farshad Aug 29 '14 at 20:56
  • My optionGrapper.php is returning '["one","two","three","four","five"]' (minus single quotes). I am assuming this is correct, no? I am using json_encode() on the PHP side, and I was assuming that, since the alerts were displaying the proper information, that jQuery was decoding the JSON properly. However, I added an array and used .each on that and the select populated correctly. – Brian Aug 29 '14 at 21:03

3 Answers3

1

You can directly add value without using the setAttribute method like this:

var selectBox = document.createElement("select");
$.getJSON('optionGrabber.php', function(data) {
    $.each(data, function(key, dbValue) {
        var option = document.createElement("option");
        option.value = dbValue;
        option.text = dbValue;
        selectBox.appendChild(option);
    });
});
myDiv.appendChild(selectBox);

Added the text to the option as well

Working Fiddle

V31
  • 7,626
  • 3
  • 26
  • 44
0

I think to initialize the value it should be:

option.value = dbValue;

per w3Schools reference for javascript and option. I think I encountered this once myself.

user3357118
  • 844
  • 7
  • 14
0

I think the issue here might be that your not setting the text option? So they are being added but you can't see them?

option.text = dbValue;
Stuart Miller
  • 647
  • 3
  • 8
  • Nope, that's not it. Using Firebug, the JavaScript creates the "select" element, but does not add the options. – Brian Aug 29 '14 at 20:50
  • I created this fiddle dummying some of your data: http://jsfiddle.net/ruv5mycy/ Might help? – Stuart Miller Aug 29 '14 at 20:52
  • Following your example, I added an array and used .each on that and the select populated correctly. My optionGrapper.php is returning '["one","two","three","four","five"]' (minus single quotes). I am assuming this is correct, no? I am using json_encode() on the PHP side, and I was assuming that, since the alerts were displaying the proper information, that jQuery was decoding the JSON properly. – Brian Aug 29 '14 at 21:05
  • I have update Fiddle to use that array and it works okay. That's what you get if you log 'data' to the console before the .each()? – Stuart Miller Aug 29 '14 at 21:08
  • Yes. I even check the size of the array returning from my optionGrabber.php and it is correct. – Brian Aug 29 '14 at 21:09
  • optionGrapper.php on a URL the fiddle can call? – Stuart Miller Aug 29 '14 at 21:09
  • Yes it is. Like I said, the "alert()" can display the options correctly, they just aren't getting appended to the selectBox. – Brian Aug 29 '14 at 21:11
  • Let us [continue this discussion in chat](http://chat.stackoverflow.com/rooms/60264/discussion-between-stuart-miller-and-brian). – Stuart Miller Aug 29 '14 at 21:12
  • What happens if you use 'key' instead of 'dbValue'? – Stuart Miller Aug 29 '14 at 21:16