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...
Populating ASP.NET Dropdown List with List of Countries. C# / C Sharp Forums on Bytes. Home topics c# / c sharp questions populating asp.net dropdown list with list of countries. I would like to populate the dropdown with the list of all country name ( e.g South Africa, Zimbabwe,United States, etc). Is there a function to do. I am doing program in java.I have designed a jsp page which has 3 drop downlist's.country,state and district.I want to display the values in drop down list state when a country is selected.(for eg:-if india is selected,drop down list state must have only the name of states in india).In Mysql i.
The above code helps me populate just the countries but not others like states and cities. Any help is much appreciated.
Thanks in advance.
SpiritOfDragonSpiritOfDragon
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 - Fiddlefaceface
![Country Country](/uploads/1/2/4/8/124866180/990434779.jpg)
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.
Salman ASalman A
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.
EricEric
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.
speti43speti43