选择初始下拉选项后显示对应子下拉框的实现问题

原代码存在两个核心问题导致无法正常显示对应子下拉框：

1. 事件重复绑定：在select_class函数内部再次绑定#class的change事件，每次触发onchange都会新增一个事件监听，导致逻辑混乱，无法正确执行显示/隐藏操作。
2. 初始状态未隐藏：所有教师下拉框默认处于显示状态，选择班级后仅隐藏其他组，但首次选择时可能因初始状态问题导致视觉效果异常。

修复步骤 #

1. 调整HTML结构 #

移除班级下拉框的onchange属性，改用更规范的事件绑定方式：

<div class="form-control">
  <label for="class" id="label-class">
    选择你的班级
  </label>
  
  <!-- 班级下拉框 -->
  <select name="class" id="class">
    <option value="" disabled selected hidden>选择班级...</option>
    <option value="A">A</option>
    <option value="B">B</option>
    <option value="C">C</option>
  </select>
</div>

<!-- 教师下拉框组 -->
<div class="TeachGroup" id="AClass">
  <label for="FieldA"> 你的教师列表 </label>
  <select class="form-control" id="FieldA">
    <option>A班教师1</option>
    <option>A班教师2</option>
    <option>A班教师3</option>
    <option>A班教师4</option>
    <option>A班教师5</option>
  </select>
</div>

<div class="TeachGroup" id="BClass">
  <label for="FieldB"> 你的教师列表 </label>
  <select class="form-control" id="FieldB">
    <option>B班教师1</option>
    <option>B班教师2</option>
    <option>B班教师3</option>
    <option>B班教师4</option>
    <option>B班教师5</option>
  </select>
</div>

<div class="TeachGroup" id="CClass">
  <label for="FieldC"> 你的教师列表 </label>
  <select class="form-control" id="FieldC">
    <option>C班教师1</option>
    <option>C班教师2</option>
    <option>C班教师3</option>
    <option>C班教师4</option>
    <option>C班教师5</option>
  </select>
</div>

2. 添加CSS默认隐藏样式 #

确保所有教师下拉框初始状态为隐藏：

.TeachGroup {
  display: none;
  margin-top: 12px; /* 可选，提升页面美观度 */
}

3. 重构JavaScript逻辑 #

使用jQuery的DOM就绪事件绑定，避免重复绑定，简化显示/隐藏逻辑：

<!-- 确保引入jQuery库 -->
<script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
<script>
$(document).ready(function() {
  // 监听班级下拉框的选择事件
  $("#class").on("change", function() {
    const selectedVal = $(this).val();
    
    // 先隐藏所有教师下拉框组
    $(".TeachGroup").hide();
    
    // 根据选中值显示对应组
    if (selectedVal === "A") {
      $("#AClass").show();
    } else if (selectedVal === "B") {
      $("#BClass").show();
    } else if (selectedVal === "C") {
      $("#CClass").show();
    }
  });
});
</script>

关键优化点 #

• 移除冗余的onchange属性，改用jQuery事件绑定，避免重复监听问题
• 统一先隐藏所有教师组，再显示目标组，逻辑更清晰且不易出错
• 通过CSS控制初始隐藏状态，确保页面加载后仅显示班级选择框

内容的提问来源于stack exchange，提问作者Swayam P