Quiero crear un archivo que tenga dos menús desplegables, donde las opciones del segundo menú desplegable dependen de la selección del primer menú desplegable. Nunca he escrito HTML antes y realmente no sé lo que estoy haciendo, así que disculpas de antemano. He intentado reutilizar el código dehttps://www.w3schools.com/howto/howto_js_cascading_dropdown.asp para tres menús desplegables. A continuación, proporciono mi intento de reutilizar dos menús desplegables:
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>Pero en lugar de completar el segundo menú desplegable con el texto de las opciones, solo muestra el índice de cada selección dependiente. Entonces, si elijo opt1 del primer menú desplegable, el segundo menú desplegable se completa con las opciones '0', '1', '2', '3', '4' en lugar de "opt6", "opt7", "opt8" , "opt9", "opt10".
Agradecería mucho cualquier idea de cómo solucionar esto.