Click here to Skip to main content
15,882,552 members
Please Sign up or sign in to vote.
1.00/5 (1 vote)
Hi Team

I am experience small issue with my code, i need to find a way where i will have category of its own with subcategory. I am using javascript together with bootstrap class to do. Maybe if i can be shown 5 of these, rest i can follow them without any problem.

What I have tried:

<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>
Posted

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900