JavaScript联动下拉菜单（Dependent Dropdown）无法正常工作求助

你的代码存在三个关键问题，导致联动效果无法实现：

• 数据结构错误：typeObject中的子项使用对象语法{}但未定义合法键值对，属于无效语法。需要把这些子项改成数组[]来存储选项列表。
• 取值逻辑错误：var y = typeObject[typeSel.value][this.value]; 这行逻辑冗余且错误，this.value就是Type下拉框当前选中的值，直接通过typeObject[this.value]就能获取对应的选项数组。
• 选项添加目标错误：循环中错误地将新选项添加到了Type下拉框（typeSel），而非目标的Case Reason下拉框（caseReasonSel）。

修正后的完整代码 #

<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<script>
var typeObject = {
  "1": ["a", "b", "c"],
  "2": ["d", "e", "f", "g", "h"]
}
window.onload = function() {
  var typeSel = document.getElementById("Type");
  var caseReasonSel = document.getElementById("Case_Reason");
  
  // 初始化Type下拉框选项
  for (var x in typeObject) {
    typeSel.options[typeSel.options.length] = new Option(x, x);
  }
  
  // Type下拉框变动事件
  typeSel.onchange = function() {
    // 清空Case Reason原有选项，保留默认的None
    caseReasonSel.length = 1;
    // 获取当前选中Type对应的选项数组
    var options = typeObject[this.value];
    if (options) {
      // 遍历数组添加到Case Reason下拉框
      for (var i = 0; i < options.length; i++) {
        caseReasonSel.options[caseReasonSel.options.length] = new Option(options[i], options[i]);
      }
    }
  }
</script>
</head>   
<body>

<h1>Cascading Dropdown Examples</h1>

<form name="form1" id="form1" action="/action_page.php">
Type: <select name="Type" id="Type">
    <option value="" selected="selected">None</option>
  </select>
  <br><br>
Case Reason: <select name="Case_Reason" id="Case_Reason">
    <option value="" selected="selected">None</option>
  </select>
  <br><br>
  <input type="submit" value="Submit">  
</form>

</body>
</html>

内容的提问来源于stack exchange，提问作者Rakshita Singh