Today, We want to share with you country state city dropdown javascript.In this post we will show you how to populate state dropdown based on option selected in country dropdown using jquery?, hear for Show district list as per country and state select in dropdown select box Javascript we will give you demo and example for implement.In this post, we will learn about populate Cascading A DropDownList with group options with an example.
Cascading Dependent Dropdown Country, State, City Using JavaScript
index.html
Untitled Document
country state city drop down list using javascript
In JavaScript, you can create a dynamic drop-down list for country, state, and city using an array of objects containing the required data. Here is an example code to create a dynamic drop-down list for country, state, and city:
// JavaScript Code const data = [ { country: "USA", states: [ { state: "California", cities: ["Los Angeles", "San Francisco", "San Diego"] }, { state: "Texas", cities: ["Houston", "Dallas", "Austin"] } ] }, { country: "India", states: [ { state: "Maharashtra", cities: ["Mumbai", "Pune", "Nagpur"] }, { state: "Karnataka", cities: ["Bangalore", "Mysore", "Mangalore"] } ] } ]; // Function to populate country drop-down list function populateCountry() { const countryList = document.getElementById("country"); data.forEach(function(item) { const option = document.createElement("option"); option.text = item.country; option.value = item.country; countryList.add(option); }); } // Function to populate state drop-down list function changeCountry() { const stateList = document.getElementById("state"); const cityList = document.getElementById("city"); const selectedCountry = document.getElementById("country").value; stateList.innerHTML = ""; cityList.innerHTML = ""; if (selectedCountry !== "") { const countryData = data.find(item => item.country === selectedCountry); if (countryData) { countryData.states.forEach(function(item) { const option = document.createElement("option"); option.text = item.state; option.value = item.state; stateList.add(option); }); } } } // Function to populate city drop-down list function changeState() { const cityList = document.getElementById("city"); const selectedCountry = document.getElementById("country").value; const selectedState = document.getElementById("state").value; cityList.innerHTML = ""; if (selectedCountry !== "" && selectedState !== "") { const countryData = data.find(item => item.country === selectedCountry); if (countryData) { const stateData = countryData.states.find(item => item.state === selectedState); if (stateData) { stateData.cities.forEach(function(item) { const option = document.createElement("option"); option.text = item; option.value = item; cityList.add(option); }); } } } } // Call the populateCountry() function to initialize the country drop-down list populateCountry();
In the above code, we have an array of objects called data that contains information about countries, states, and cities. We then have three functions - populateCountry(), changeCountry(), and changeState() - to populate the drop-down lists for country, state, and city.
I hope you get an idea about state drop down list in html.
I would like to have feedback on my infinityknow.com blog.
Your valuable feedback, question, or comments about this article are always welcome.
If you enjoyed and liked this post, don’t forget to share.