Straight after my previous tutorial on the Multilevel dropdown menu using CSS, here we are going to discuss interdependent dropdown menus using JavaScript.
Do you remember those options you selected while you were applying for a course? Or when you were ordering your favorite pizza? Or when you were booking tickets? Or simply when you had to enter your address in an online shopping website, where certain dropdown menus populate their content based on your choices in their preceding menus? These are called Interdependent Dropdowns.
As the name suggests these dropdowns depend on other dropdowns to change the selectable elements on the fly. How cool would that be to learn next!
I have created a very simple example of interdependent dropdown menus. However, I’ve made it into not just one, but two levels of interdependent lists as people usually get confused with the second level of added dependency.
To implement this, I have used nested key-value pairs and JavaScript to set up the conditional statements that construct the dependent menus once we select a value from the former combo-box.
Well, here’s the complete code.
The form doesn’t really do any action after the submit button is clicked. It just helps to know how interdependent dropdown menus work.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<meta name="author" content="techglimpses">
<meta name="viewport" content="width=device-width,initial-scale=1">
<title>INTERDEPENDENT DROP-DOWN</title>
<h1 align=left>SELECT YOUR CITY</h1>
<br>
<script>
var stateObject =
{ "North India":
{
"Bihar":["Araria","Arwal","Aurangabad","Banka","Begusarai"],
"Gujarat":["Ahmedabad","Amreli","Anand","Aravalli","Banaskantha"],
"Haryana":["Ambala","Bhiwani","Charkhi Dadri","Faridabad","Fatehabad"],
"Himachal Pradesh":["Chamba","Kangra","Lahaul and Spiti","Kullu","Mandi"],
"Jammu & Kashmir":["Anantnag","Doda","Kathua","Kishtwar","Kulgam"],
"Jharkand":["Bokaro","Chatra","Deoghar","Dhanbad","Dumka"],
"Madhya Pradesh":["Agar","Alirajpur","Anuppur","Ashoknagar","Balaghat"],
"Punjab":["Amritsar","Barnala","Bathinda","Fazilka","Faridkot"],
"Rajasthan":["Ajmer","Alwar","Banswara","Baran","Barmer"],
"Uttarakhand":["Almora","Bageshwar","Chamoli","Champawat","Dehradun"],
"Uttar Pradesh":["Agra","Aligarh","Ambedkar Nagar","Amroha","Auriya"],
"West Bengal":["Alipurduar","Bankura","Paschim Bardhaman","Purba Bardhaman","Birbhum" ]
},
"North East India":
{
"Arunachal Pradesh": ["Bomdila","Lemmi","Seppa","Tawang Town","Yupia"],
"Assam": ["Baksa","Barpeta","Biswanath","Bongaigaon","Cachar"],
"Manipur":["Bishnupur","Chandel","Churachandpur","Imphal East","Imphal West"],
"Meghalaya":["Ampati","Jowai","Khliehriat","Nongpoh","Nongstoin"],
"Mizoram":["Aizawl","Kolasib","Lawngtlai","Lunglei","Mamit"],
"Nagaland":["Dimapur","Kiphire","Kohima","Longleng","Mokokchung"],
"Sikkim":["East Sikkim","North Sikkim","South Sikkim","West Sikkim"],
"Tripura":["Dhalai","North Tripura","South Tripura","West Tripura"]
},
"Mid India":
{
"Chhattisgarh":["Balod","Baloda Bazar","Balrampur","Bastar","Bemetara"],
"Goa":["North Goa","South Goa"],
"Maharashtra":["Ahmednagar","Akola","Amravati","Aurangabad","Beed"],
"Odisha":["Angul","Boudh","Balangir","Bargarh","Balasore"]
},
"South India":
{
"Andhra Pradesh":["Anantpur","Chittoor","East Godavari","Guntur","Kadapa"],
"Karnataka":["Bagalkot","Bengaluru Urban","Bengalur Rural","Belagavi","Bellary"],
"Kerala":["Alapuzha","Ernakulam","Idukki","Kannur","Kasargod"],
"Telangana":["Adilabad","Bhadradri Kothagudem","Hyderabad","Jagitial","Jangaon"],
"Tamil Nadu":["Ariyalur","Chennai","Coimbatore","Cuddalore","Dharmapuri" ]
}
}
window.onload = function ()
{
var regionSelect = document.getElementById("regionSelect"),
stateSelect = document.getElementById("stateSelect"),
districtSelect = document.getElementById("districtSelect");
for (var region in stateObject)
{
regionSelect.options[regionSelect.options.length] = new Option(region, region);
}
regionSelect.onchange = function ()
{
stateSelect.length = 1; // remove all options bar first
districtSelect.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
for (var state in stateObject[this.value])
{
stateSelect.options[stateSelect.options.length] = new Option(state, state);
}
}
regionSelect.onchange(); // reset in case page is reloaded
stateSelect.onchange = function ()
{
districtSelect.length = 1; // remove all options bar first
if (this.selectedIndex < 1) return; // done
var district = stateObject[regionSelect.value][this.value];
for (var i = 0; i < district.length; i++)
{
districtSelect.options[districtSelect.options.length] = new Option(district[i], district[i]);
}
}
}
</script>
</head>
<body>
<form name="myform" id="myForm">
<div class="select">
<select name="state" id="regionSelect" size="1">
<option value="" selected="selected">SELECT REGION</option>
</select>
<div class="select_arrow"></div>
</div>
<br>
<div class="select">
<select name="region" id="stateSelect" size="1">
<option value="" selected="selected">SELECT STATE</option>
</select>
<div class="select_arrow"></div>
</div>
<br>
<div class="select">
<select name="district" id="districtSelect" size="1">
<option value="" selected="selected">SELECT DISTRICT</option>
</select>
<div class="select_arrow"></div>
</div>
<br>
<input type="button" value="SUBMIT"></input>
</div>
</form>
<closeform></closeform>
</body>
</html>