Question

就像我在标题中说的那样，我想隐藏一个列表，直到选择了另一个上方的列表为止，例如，选择班级后显示学生列表（因此仅显示属于所选班级的学生）< / p>

<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>

只有选择了另一个选择（父项）后，我才能显示选择列表

1 个答案: