How to create a cascading dropdown menu in HTML

Question

I want to create a file that has two dropdown menus, where the second dropdown options are dependent on the selection from the first dropdown. I have never written HTML before and I don't really now what I'm doing, so apologies in advance. I have tried to repurpose the code fromhttps://www.w3schools.com/howto/howto_js_cascading_dropdown.asp for three dropdowns. Below, I provide my attempt to repurpose for two dropdowns:

 var Professionobj = { "opt1": ["opt6", "opt7", "opt8", "opt9", "opt10"], "opt2": ["opt11", "opt12", "opt13"], "opt3": ["opt14", "opt15", "opt16", "opt17"], "opt4": ["opt18", "opt19", "opt20"], } window.onload = function() { var ProfessionSel = document.getElementById("Profession"); var SpecialismSel = document.getElementById("Specialism"); for (var x in Professionobj) { ProfessionSel.options[ProfessionSel.options.length] = new Option(x, x); } ProfessionSel.onchange = function() {    //empty Chapters- and Topics- dropdowns     SpecialismSel.length = 1; //display correct values for (var y in Professionobj[this.value]) { SpecialismSel.options[SpecialismSel.options.length] = new Option(y, y); } } }

 <h1>Cascading Dropdown Example</h1> <form name="form1" id="form1" action="/action_page.php"> Professions: <select name="Profession" id="Profession"> <option value="" selected="selected">Select Profession</option> </select> <br><br> Specialisms: <select name="Specialism" id="Specialism"> <option value="" selected="selected">Please select Profession first</option> </select>

But instead of populating the second dropdown with the text for the options, it just displays the index of each dependent selection. So if I choose opt1 from the first dropdown then the second dropdown is populated with the options '0', '1', '2', '3', '4' instead of "opt6", "opt7", "opt8", "opt9", "opt10".

I would greatly appreciate any insight as to how to solve this.

Answer 1

just replace your for loop's body of ProfessionSel.onchange() with the following code

ProfessionSel.onchange = function() {    //empty Chapters- and Topics- dropdowns
SpecialismSel.length = 1;
//display correct values
var y = Professionobj[ProfessionSel.value];
for (var i = 0; i < y.length; i++ ) {
  SpecialismSel.options[SpecialismSel.options.length] = new Option(y[i], y[i]);
 }
}