Populate state and city dropdowns based on country and state using jQuery
ajax, html-select, javascript, jquery, json
Solution
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
Problem
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.