纯JS实现select联动：父级选默认值时重置子级选择框选项

现有代码问题 #

• 未对第一个下拉框选中值为0的场景做判断，此时faculties[event.target.value]为undefined，直接调用map方法会抛出异常
• reset函数逻辑不符合需求：原逻辑是判断第二个下拉框的选中状态，而实际需求是第一个下拉框选中0时触发第二个下拉框重置
• 变量名混用：代码中同时使用prodiSelection和pStudy指向第二个下拉框，部分环境下可能出现未定义错误

修改后代码 #

const faculties = {
  1: ["Magister Manajemen", "Magister Teologi"],
  2: ["Ilmu Filsafat"],
  3: ["Pendidikan Agama", "Pendidikan Bahasa Inggris", "Pendidikan Ekonomi", "Pendidikan Luar Sekolah"],
  4: ["Akuntansi", "Manejemen"],
  5: ["Agroteknologi"],
  6: ["Informatika", "Sistem Informasi"],
  7: ["Profesi Ners", "Keperawatan"],
  8: ["Sekretari D3"],
};

const facultySelection = document.querySelector("#faculty");
const prodiSelection = document.querySelector("#pStudy");

// 复用第二个下拉框的默认模板
const defaultProdiHtml = `<option value="0" selected>--SELECT PROGRAM OF STUDY --</option>`;

facultySelection.addEventListener("change", (event) => {
  const selectedVal = event.target.value;
  // 选中第一个下拉框的默认选项时，直接重置第二个下拉框
  if (selectedVal === '0') {
    prodiSelection.innerHTML = defaultProdiHtml;
    return;
  }
  // 选中有效学院时，生成对应专业选项
  const prodies = faculties[selectedVal];
  // 如果不需要选学院后第二个下拉框仍保留默认提示项，可删掉下方的defaultProdiHtml + 部分
  prodiSelection.innerHTML = defaultProdiHtml + prodies.map(p => `<option value="${p}">${p}</option>`).join("");
});

内容的提问来源于stack exchange，提问作者Wahyu Agung