Using jQuery, JSON and AJAX to populate a drop down

Question

Hi guys, like the title says, I am trying to create a drop down menu using jQuery, JSON and AJAX, although I am familiar with the theory I have yet to put it into practice, any advice, demo code snippets or tutorials would be appreciated, since I would like to get off to the best possible start!

Thanx in advance!

Answer 1

This should do the trick:

$.getJSON("test.php", function(data){
  $.each(data, function(index, text) {
    $('#mySelect').append(
        $('<option></option>').val(index).html(text)
    );
  });
});

note: test.php should return an json encoded array

Answer 2

Hi, You need to do $.getJSON call to fetch json from server on document.load or on some other event http://api.jquery.com/jQuery.getJSON/ . After that you have to loop through the data and append it to your select box. see that http://www.jsfiddle.net/Dyc9Y/1/

<select id="fillME"></select>
<button id="startFilling" value="">Start ajax</button>
$(function(){
 var json = {
                 "0":  {"title":"localjsonOPtion1", "value":"b"},
                 "1":  {"title":"localjsonOPtion2", "value":"a"}
            };

  $("#startFilling").click(function(){

    $.getJSON("http://localdev.myvouchercodes.co.uk/local/default/search/jsonresponse", function(data){
         $("#fillME").html("");
        for(key in data)
            $("#fillME").append("<option value='"+json [key].value+"'>"+json[key].title+"</option>");
        for(key in json)
            $("#fillME").append("<option value='"+json [key].value+"'>"+json[key].title+"</option>");
   });    
 });
});

offcourse above example depends on json with following format.

{ 
   "0":  {"title":"option1", "value":"1"},
   "1":  {"title":"option2", "value":"2"}
}

EDITED: You also need to be familiar with select box change event http://api.jquery.com/change/ and :selected selector that will allow you to fetch selected option from the selectbox http://api.jquery.com/selected-selector/ like $("select option:selected")