如何在 HTML 中创建级联下拉菜单

Question

我想创建一个具有两个下拉菜单的文件，其中第二个下拉选项取决于第一个下拉菜单中的选择。 我以前从未写过 HTML，我现在也不知道我在做什么，所以提前道歉。 我试图将https://www.w3schools.com/howto/howto_js_cascading_dropdown.asp中的代码重新用于三个下拉列表。 下面，我尝试重新调整两个下拉列表的用途：

 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>

但不是用选项文本填充第二个下拉列表，它只显示每个相关选择的索引。 因此，如果我从第一个下拉列表中选择 opt1，则第二个下拉列表将填充选项“0”、“1”、“2”、“3”、“4”而不是“opt6”、“opt7”、“opt8” ，“选择9”，“选择10”。

我将不胜感激有关如何解决此问题的任何见解。

Answer 1

只需将您的 for 循环体 ProfessionSel.onchange() 替换为以下代码

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]);
 }
}