Populate state and city dropdowns based on country

Question

I am trying to accomplish dropdowns using JSON. I want 3 dropdowns. First populate the country dropdown (eg: usa, uk etc.,). Now, when the user select USA then states dropdown needs to be populated by using jQuery .change(). Again when user select the state they need to be presented with cities dropdowns.

How can I achieve this? As my JSON file is slightly big I have added it here and tried to populate countries dropdown but unable to generate states and cities drop down...

http://jsfiddle.net/vCFv6/

$.each(myJson.country, function (index, value) {
$("#country").append('<option value="'+value.id+'">'+value.name+'</option>');});

The above code helps me populate just the countries but not others like states and cities. Any help is much appreciated.

Thanks in advance.

Answer 1

You need to get the value of the "previous" dropdown, and filter out the other ones. Basicly you got two options:

1. Have all three dropdowns with all values. Then filter out those which is not needed.
2. Upon selecting a value in the first one, hook the change() event, make an ajax call to some backend with the selected value, and return the states and cities that corresponds to that country.

Answer 2

In your code you have to write all handlers when you make a selection, and have to query your JSON objects according to the input parameter and populate your further dropdowns, like you made the country. In that case you have all data on client side in JSON. Usually this kind of data are in a database, so you have to get from the server.

You can make it with JQuery Autocomplete Widget.

First selection you enable only the Country autocomplete.

After the user made the selection you set the state source in javascript (pass the Country parameter to the method, and when the user is typing you populates the value from the server according to the country parameter).

When the user have made the 2. selection you will enable the third autocomplete, and set the input "state" parameter and populate the values according to that in the city autocomplete.

Answer 3

Exactly like others said, you have to handle the onchange event of country & state select inputs & apply your logic. I have fiddled here for getting states dynamically on selecting a country, you might be able to code the rest yourself - Fiddle

You may also see this Populating Dropdown Based On Other Dropdown Value

Answer 4

You need to cascade the .change() events of the three text boxes such that:

• Changing country:
  • Empties the state and city dropdown
  • Populates the state dropdown (asynchronously)
• Changing state:
  • Empties the city dropdown
  • Populate the city drop down (asynchronously)

Below is a draft outline which shows how to chain the event handlers. The dropdowns are populated asynchronously so the dependent dropdowns are emptied before AJAX request.

$("#country").change(function () {
    $("#state, #city").find("option:gt(0)").remove();
    $("#state").find("option:first").text("Loading...");
    $.getJSON("/get/states", {
        country_id: $(this).val()
    }, function (json) {
        $("#state").find("option:first").text("");
        for (var i = 0; i < json.length; i++) {
            $("<option/>").attr("value", json[i].id).text(json[i].name).appendTo($("#state"));
        }
    });
});
$("#state").change(function () {
    $("#city").find("option:gt(0)").remove();
    $("#city").find("option:first").text("Loading...");
    $.getJSON("/get/cities", {
        state_id: $(this).val()
    }, function (json) {
        $("#city").find("option:first").text("");
        for (var i = 0; i < json.length; i++) {
            $("<option/>").attr("value", json[i].id).text(json[i].name).appendTo($("#city"));
        }
    });
});