Jan 18, 2017 Here Mudassar Ahmed Khan has explained with an example, how to populate Cascading i.e. Dependent Country, State and City DropDownLists using jQuery AJAX in ASP.Net MVC Razor. The Cascading i.e. Dependent Country, State and City DropDownLists will be populated from database by making use of jQuery AJAX in ASP.Net MVC Razor. TAGs: ASP.Net, AJAX, jQuery, DropDownList.
Topic: JavaScript / jQueryPrev|Next
Answer: Use the jQuery ajax()
method
Populating the state or city dropdown based on the value of option selected by the user in country dropdown is a very common implementation of ajax feature that you have seen on many websites while filling the registration form. You can do this easily through the jQuery ajax()
method and with the little help of any server side scripting language like PHP.
The jQuery script above send the value of option selected in the country dropdown to the server. The 'process-request.php' file on the server then process the request, if the request succeeds the jQuery script receives the returned data and creates the city dropdown list.
The PHP code inside 'process-request.php' will look something like this:
Related FAQ
Here are some more FAQ related to this topic:
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...
The above code helps me populate just the countries but not others like states and cities. Any help is much appreciated.
Thanks in advance.
4 Answers
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
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.
You need to get the value of the 'previous' dropdown, and filter out the other ones. Basicly you got two options:
- Have all three dropdowns with all values. Then filter out those which is not needed.
- 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.
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.