<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Cascading Dependent Dropdown Country, State, City Using JavaScript</title>
<style>
.worldForm {
background: #00d458;
border: 1px solid #ecd0d0;
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**</option>
</select>
</div>
<div class="lists">
<label>Select State:</label>
<select name="state" id="stateList">
<option value="" selected="selected">**Select**</option>
</select>
</div>
<div class="lists">
<label>Select City:</label>
<select name="city" id="cityList">
<option value="" selected="selected">**Select**</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() {
debugger;
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>