javascript - 如何仅在选择另一个选择(父级)后才显示选择列表

Question

就像我在标题中所说的那样，我想隐藏一个列表，直到选择上面的另一个列表为止，例如在选择类(class)后显示学生列表(因此仅显示属于所选类(class)的学生)

<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

最初将隐藏类(具有显示:无样式)应用于第二个选择列表，然后在第一个选择中更改值(表示已做出选择) - 删除隐藏类。

编辑 - 正如 @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>