Cascading Dependent Dropdown Country, State, City Using JavaScript
In this article, we going to see how to create a cascading dependent dropdown with country, state, and city using JavaScript. If you looking for a dependent dropdown by selecting based on the country, state, & city for your web application? Then here we have a solution to do that.
With the help of JavaScript, we going to set a variable as worldData then store all the county, state, & city data in an array format. Then finally getting array data and using onchange function we going to change country, state, & city data.
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 |
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title>Cascading Dependent Dropdown Country, State, City Using JavaScript</title> <style> .worldForm { background: #00bcd4; border: 1px solid #e4e4e4; border-radius: 4px; padding: 20px; } .lists { margin-bottom: 20px; } </style> </head> <body> <form class="worldForm"> <div class="lists"> <label>Select Country:</label> <select name="country" id="countyList"> <option value="" selected="selected">Select Country</option> </select> </div> <div class="lists"> <label>Select State:</label> <select name="state" id="stateList"> <option value="" selected="selected">Select State</option> </select> </div> <div class="lists"> <label>Select City:</label> <select name="city" id="cityList"> <option value="" selected="selected">Select City</option> </select> </div> </form> <script> var worldData = { USA: { California: ["Los Angeles", "San Diego", "Sacramento"], Texas: ["Houston", "Austin"], Florida: ["Miami", "Orlando", "Tampa"], }, India: { Maharashtra: ["Mumbai", "Pune", "Nagpur"], TamilNadu: ["Chennai", "Madurai"], Karnataka: ["Bangalore", "Mangalore"], }, Canada: { Alberta: ["Calgary", "Edmonton", "Red Deer"], BritishColumbia: ["Vancouver", "Kelowna"], Manitoba: ["Winnipeg", "Brandon"], }, Germany: { Bavaria: ["Munich", "Nuremberg"], NorthRhine: ["Cologne", "Düsseldorf"], }, }; window.onload = function () { var countyList = document.getElementById("countyList"), stateList = document.getElementById("stateList"), cityList = document.getElementById("cityList"); for (var country in worldData) { countyList.options[countyList.options.length] = new Option(country, country); } countyList.onchange = function () { stateList.length = 1; cityList.length = 1; if (this.selectedIndex < 1) return; for (var state in worldData[this.value]) { stateList.options[stateList.options.length] = new Option(state, state); } }; countyList.onchange(); stateList.onchange = function () { cityList.length = 1; if (this.selectedIndex < 1) return; var city = worldData[countyList.value][this.value]; for (var i = 0; i < city.length; i++) { cityList.options[cityList.options.length] = new Option(city[i], city[i]); } }; }; </script> </body> </html> |
Remove unwanted code and use the above code on your website or application. I hope this will help you.
As same like the above JavaScript dependent dropdown here, we have cascading dropdown with Ajax & jQuery also AngularJS.
Conclusion:
I hope country based JavaScript dropdown help you to integrate on your website or application. In this section, you have any doubts let me know in the comment box. If you like this article share it with your friends.
