<script> window.addEventListener("load", function() { var firstDropdown = document.getElementById("firstDropdown"); var secondDropdown = document.getElementById("secondDropdown"); var thirdDropdown = document.getElementById("thirdDropdown"); var options = { "Option 1": ["Option 1.1", "Option 1.2", "Option 1.3"], "Option 2": ["Option 2.1", "Option 2.2", "Option 2.3"], "Option 3": ["Option 3.1", "Option 3.2", "Option 3.3"] }; for (var key in options) { var option = document.createElement("option"); option.text = key; firstDropdown.add(option); } firstDropdown.addEventListener("change", function() { secondDropdown.innerHTML = ""; thirdDropdown.innerHTML = ""; var selectedOption = this.value; for (var i = 0; i < options[selectedOption].length; i++) { var option = document.createElement("option"); option.text = options[selectedOption][i]; secondDropdown.add(option); } }); secondDropdown.addEventListener("change", function() { thirdDropdown.innerHTML = ""; var selectedOption = this.value; var option = document.createElement("option"); option.text = "Nested: " + selectedOption; thirdDropdown.add(option); }); }); </script> </head> <body> <h1>Nested Dropdowns</h1> <select id="firstDropdown"> <option disabled selected>Select an option</option> </select> <select id="secondDropdown"> <option disabled selected>Select an option</option> </select> <select id="thirdDropdown"> <option disabled selected>Select an option</option> </select>
var
This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)