Creating a dynamic drop-down list for country, state, and city selection in JavaScript involves updating the options of the state drop-down based on the selected country and updating the options of the city drop-down based on the selected state. Here’s an example to demonstrate this:
HTML Structure
First, let’s set up a basic HTML structure with three <select> elements for country, state, and city:
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 | <!DOCTYPE html><html><head> <title>Dynamic Country-State-City Drop-Down</title></head><body> <h1>Dynamic Country-State-City Drop-Down Example</h1> <label for="country">Country:</label> <select id="country"> <option value="" disabled selected>Select a country</option> </select> <br><br> <label for="state">State:</label> <select id="state"> <option value="" disabled selected>Select a state</option> </select> <br><br> <label for="city">City:</label> <select id="city"> <option value="" disabled selected>Select a city</option> </select> <script src="script.js"></script></body></html> |
JavaScript Code
Now, let’s write the JavaScript code to handle the dynamic updating of state and city options based on the selected country and state. We’ll include this code in a separate file named script.js.
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 | document.addEventListener('DOMContentLoaded', function() { const countries = { "USA": { "California": ["Los Angeles", "San Francisco", "San Diego"], "Texas": ["Houston", "Dallas", "Austin"] }, "Canada": { "Ontario": ["Toronto", "Ottawa", "Hamilton"], "Quebec": ["Montreal", "Quebec City", "Laval"] } }; const countrySelect = document.getElementById('country'); const stateSelect = document.getElementById('state'); const citySelect = document.getElementById('city'); // Populate the country drop-down for (let country in countries) { let option = document.createElement('option'); option.value = country; option.textContent = country; countrySelect.appendChild(option); } // Event listener for country change countrySelect.addEventListener('change', function() { stateSelect.innerHTML = '<option value="" disabled selected>Select a state</option>'; citySelect.innerHTML = '<option value="" disabled selected>Select a city</option>'; let states = countries[countrySelect.value]; for (let state in states) { let option = document.createElement('option'); option.value = state; option.textContent = state; stateSelect.appendChild(option); } }); // Event listener for state change stateSelect.addEventListener('change', function() { citySelect.innerHTML = '<option value="" disabled selected>Select a city</option>'; let cities = countries[countrySelect.value][stateSelect.value]; for (let city of cities) { let option = document.createElement('option'); option.value = city; option.textContent = city; citySelect.appendChild(option); } });}); |
Explanation
- HTML Setup:
- Three
<select>elements with the idscountry,state, andcityfor country, state, and city selection, respectively.
- Three
- JavaScript Code:
document.addEventListener('DOMContentLoaded', function() { ... });: Ensures the JavaScript code runs after the DOM has fully loaded.const countries = { ... };: Defines a nested object containing countries, states, and cities.const countrySelect = document.getElementById('country');: Gets the reference to the country drop-down list.const stateSelect = document.getElementById('state');: Gets the reference to the state drop-down list.const citySelect = document.getElementById('city');: Gets the reference to the city drop-down list.- Populating the country drop-down with options based on the
countriesobject. - Adding an event listener to the country drop-down to update the state drop-down options based on the selected country.
- Adding an event listener to the state drop-down to update the city drop-down options based on the selected state.
Summary
This example demonstrates how to create a dynamic drop-down list for country, state, and city selection using JavaScript.