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:
<!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.
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.