Populate state and city drop-down lists by country and state with jQuery

Question

I am trying to execute dropdowns using JSON. I want 3 drop down menus. First, fill in the drop-down list of the country (for example: usa, uk, etc.). Now, when the user selects USA, then the status popup should be populated using jQuery.change (). Again, when the user selects a state, it should be presented with drop-down lists of cities.

How can i achieve this? Since my JSON file is a bit large, I added it here and tried to fill in the drop-down list of countries, but could not collapse the cities and cities ...

http://jsfiddle.net/vCFv6/

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

The code above helps me fill out only countries, but not others, such as states and cities. Any help is greatly appreciated.

Thanks in advance.

Answer 1

Just like others said, you should handle the onchange event of a country and state and apply your logic. I was busy here with the goal of dynamically obtaining states when choosing a country, you can code the rest yourself - Fiddle

You can also see this popup drop down based on a different drop down value

Answer 2

You need to cascade .change() events of three text fields that:

• Country Change:
  • Empties the state and city drop-down menus.
  • Configures the status drop-down menu (asynchronously)
• State change:
  • Empties the city’s drop-down menu.
  • Push city down (asynchronously)

Below is a draft of a project that shows how to link event handlers. Drop-down lists are populated asynchronously, so dependent drop-down lists are omitted before the 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")); } }); }); 

Answer 3

You need to get the value of the “previous” drop-down list and filter the rest. Basically you have two options:

• All three drop-down lists with all values. Then filter those that are not needed.
• After selecting the value in the first, move the change () event, make an ajax call for some backend with the selected value, and return the states and cities corresponding to this country.

Answer 4

In your code you need to write all the handlers when you make a choice, and you need to request JSON objects according to the input parameter and fill in your subsequent drop-down lists, for example, you made a country. In this case, you have all the client-side data in JSON. Usually this kind of data is in the database, so you need to get it from the server.

You can do this with the jQuery Autocomplete Widget .

The first choice allows you to enable only auto-complete the country.

After the user has made a choice, you will set the state source in javascript (pass the Country parameter to the method, and when the user enters, you fill in the value from the server in accordance with the country parameter).

When the user has made selection 2., you turn on the third autocomplete and set the input parameter "state" and fill in the values ​​corresponding to the values ​​in the autocomplete of the city.