如何在选择了另一个选择（父级）后才能显示选择列表

Question

就像我在标题中说的那样，我希望隐藏一个列表，直到选择了另一个列表，例如在选择一个班级后显示学生列表（因此只显示属于所选班级的学生）

<select name="class">
   <option value="">class1</option>
   <option value="">class2</option>
</select>

<select name="student">
  <option value="">student1</option>
  <option value="">student2</option>
</select>

Answer 1

最初将隐藏类（带display：none样式）应用于第二个选择列表，然后在第一个选择中更改值（表示已做出选择） - 删除隐藏类。

编辑 - 正如@HerrSerker所建议的那样 - 事件监听器现在在JS中而不是HTML中的内联。

请注意，每个选择列表都有一个选定的禁用选项 - 允许使用空白选项而不是默认选择的第一个选项。

// add event listener for change of class select list
document.querySelector('select[name="class"]')
  .addEventListener('change', updateStudent)


//function to remove the hidden class and styling of the second select list
function updateStudent() {
 var el = document.querySelector('select[name="student"].hidden');
 el.classList.remove('hidden')

 }

select[name="student"].hidden { 
 display:none
}

<select name="class">
  <option disabled selected></option>
   <option value="">class1</option>
   <option value="">class2</option>
</select>

<select name="student" class="hidden">
  <option disabled selected></option>
  <option value="">student1</option>
  <option value="">student2</option>
</select>