Parsing a JSON object with jQuery and creating two drop down lists with that data

LordsOfStyle

New Member
I am trying to dynamically create two drop down lists, one will be provinces, and the other will contain the cities of each province, so when a user chooses a province, the cities drop down will populate, I am using jQuery's $.ajax funtion to get the data from a database which then passes it back as JSON, here is what I have thus far, jQuery:\[code\]$.getJSON("provinces.php", function(data){//clean out the select list$('#province').html(''); //run the loop to populate the province drop down list $.each(data, function(i, json) { var province = json.province; var cities = json.cities; $('#province').append( $('<option></option>').html(province) ); });});\[/code\]a snippit of the JSON:\[code\][ {"province":"Eastern Cape","cities":"Mthatha,Njoli,Port Alfred,Port Elizabeth,Queenstown,Uitenhage"}, {"province":"Freestate","cities":"Thaba Nchu,Virginia,Welkom"}]\[/code\]I am populating the provinces drop down, but not the cities drop down.I would like to hear from you guys what you think the best method will be to achieve the cities drop down.Thanx in advance!
 
Back
Top