This code provides the functionality to create multiple dependent drop-down lists in JavaScript. The drop-down lists are populated dynamically based on the user’s selection.
Whether you need to gather information related to categories, subcategories, product attributes, or any other interconnected data, this code offers a powerful and user-friendly solution. It helps you to create a cascading or dependent drop-down list where the options in one drop-down depend on the selection made in another drop-down.
How to Create Multiple Dependent Drop Down Lists using JavaScript
1. Create the HTML structure for multiple dependent drop-down lists as follows:
<div class="container"> <h2>Multi Level Dependent Drop Down</h2> <form action="#"> <select name="" id="country"> <option value="">-- Select Country --</option> </select> <select name="" id="state"> <option value="">-- Select State --</option> </select> <select name="" id="city"> <option value="">-- Select City --</option> </select> <select name="" id="zip"> <option value="">-- Select Zip --</option> </select> </form> </div>
2. After that, define the basic CSS styles for the form and select dropdown. If you want to customize the select dropdown, check out this code project.
*{ margin: 0; padding: 0; box-sizing: border-box; } body{ display: flex; justify-content: center; align-items: center; min-height: 100vh; background-color: #EEEEEE; } .container{ text-align: center; } .container h2{ font-size: 2vw; font-family: 'Courier New', Courier, monospace; margin-bottom: 40px; letter-spacing: 1.2px; } form{ display: flex; justify-content: center; align-items: center; flex-direction: column; gap: 15px; } form select{ width: 450px; padding: 15px; padding-left: 10px; background-color: #fff; border-radius: 10px; border: none; outline: none; font-size: 1.2rem; box-shadow: 0 5px 10px 0 rgb(0,0,0,0.25); cursor: pointer; }
3. Finally, add the following JavaScript code to your project and update options according to your needs.
var countrySateCityinfo = { Australia: { "Western Australia": { Broome: ["6725", "6318", "6701"], Coolgardie: ["6429", "6432"] }, Tasmania: { Hobart: ["7000", "7520"], Launceston: ["7250", "7334"], Burnie: ["7320", "7315"] } }, Germany: { Bavaria: { Munich: ["80331", "80333", "80335"], Numemberg: ["90402", "90403", "90404"] }, Hessen: { Frankfurt: ["60306", "60309", "60310"], Surat: ["55246", "55247", "55248", "55249"] } }, Canada: { Alberta: { Calgary: ["8033", "8333", "8035"], Edmonton: ["9040", "9403", "9040"] }, Manitoba: { Brandon: ["6030", "6030"], Winnipeg: ["5524", "5547", "5248"] } } } window.onload = function(){ const selectCountry = document.getElementById('country'), selectState = document.getElementById('state'), selectCity = document.getElementById('city'), selectZip = document.getElementById('zip'), selects = document.querySelectorAll('select') selectState.disabled = true selectCity.disabled = true selectZip.disabled = true selects.forEach(select => { if(select.disabled == true){ select.style.cursor = "auto" } else{ select.style.cursor = "pointer" } }) for(let country in countrySateCityinfo){ // console.log(country); selectCountry.options[selectCountry.options.length] = new Option(country, country) } // country change selectCountry.onchange = (e) =>{ selectState.disabled = false selectCity.disabled = true selectZip.disabled = true selects.forEach(select => { if(select.disabled == true){ select.style.cursor = "auto" } else{ select.style.cursor = "pointer" } }) selectState.length = 1 selectCity.length = 1 selectZip.length = 1 for(let state in countrySateCityinfo[e.target.value]){ // console.log(state); selectState.options[selectState.options.length] = new Option(state, state) } } // state change selectState.onchange = (e) =>{ selectCity.disabled = false selectZip.disabled = true selects.forEach(select => { if(select.disabled == true){ select.style.cursor = "auto" } else{ select.style.cursor = "pointer" } }) selectCity.length = 1 selectZip.length = 1 for(let city in countrySateCityinfo[selectCountry.value][e.target.value]){ // console.log(city); selectCity.options[selectCity.options.length] = new Option(city, city) } } // change city selectCity.onchange = (e) =>{ selectZip.disabled = false selects.forEach(select => { if(select.disabled == true){ select.style.cursor = "auto" } else{ select.style.cursor = "pointer" } }) selectZip.length = 1 let zips = countrySateCityinfo[selectCountry.value][selectState.value][e.target.value] for(let i=0; i<zips.length; i++){ selectZip.options[selectZip.options.length] = new Option(zips[i], zips[i]) } } }
That’s all! hopefully, you have successfully created multiple dependent drop down list using JavaScript. If you have any questions or suggestions, feel free to comment below.