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

Question

Hi guys, 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:

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

    });
});

a snippit of the JSON:

[
 {"province":"Eastern Cape","cities":"Mthatha,Njoli,Port Alfred,Port Elizabeth,Queenstown,Uitenhage"},
 {"province":"Freestate","cities":"Thaba Nchu,Virginia,Welkom"}
]

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!

Answer 1

Store the json somewhere, i.e. using $('…').data(key, value).

Add a trigger for the change event on province: $('#province').live('change', function() {…})

When triggered get the value from province $('#province').val() and use it to get the cities. Loop out the cities as options for the city selector (same technique as you showed above).

Whether the cities select is shown and empty or completely hidden by default is up to you.

(Depending on the number of provinces [amount of data] you could also create all selects in html and simply toggle their display)

Hope this helps!

Answer 2

Copy and go ;)

It fills the province-field like you do... additional there is a map created (province -> citys). The province select field gets an onChange listener. If available, the listener fetchs the cities out of the map and set them into the city-select box.

$(function() {
    var data = [
     {"province":"Eastern Cape","cities":"Mthatha,Njoli,Port Alfred,Port Elizabeth,Queenstown,Uitenhage"},
     {"province":"Freestate","cities":"Thaba Nchu,Virginia,Welkom"}
    ]

    var map = {};

    $('#cities').attr('disabled', 'disabled');

    $(data).each(function(i, data) {
        map[data.province] = data.cities.split(',');
        $('#provinces').append('<option value="' + data.province + '">'+data.province+"</option>");
    });

    $('#provinces').change(function() {


        var disable = function() {
            $('#cities')
                .html('<option>select city</option>')
                .attr('disabled', 'disabled');
        }

        var enable = function() {
            $('#cities')
                .removeAttr('disabled', 'false')
                .html('');

        }

        if (!$(this).val()) {
            disable();
            return;
        }
        else if (typeof map[$(this).val()] == 'undefined') {
            alert('invalid city');
            disable();
            return;
        }

        enable();

        $(map[$(this).val()]).each(function(i, city) {
            $('#cities').append(
                $('<option></option>')
                    .text(city)
                    .val(city)
            );
        });
    });
});