如何通过JavaScript和CSS根据select元素值显示对应div

核心问题梳理 #

• 条件判断错误：使用赋值运算符=而非比较运算符===，导致逻辑完全失效
• 缺少事件监听：代码仅在页面初始化时执行一次，select选项变更后不会触发更新
• 逻辑不完整：选中某选项时未隐藏其他div，会出现多个内容同时显示的情况

修正后的完整代码 #

HTML

<div>
  <div>
    <label>Department
      <select id="departments" name="departments">
        <option value="" selected>Select Department...</option>
        <option value="lower">Lower</option>
        <option value="upper">Upper</option>
        <option value="higher">Higher</option>
      </select>
    </label>
  </div>
</div>

<div class="lower-dep">
  <div class="input-check">
    <input type="checkbox" id="color1" name="color1" value="Red">
    <label for="color1"> Red</label>
  </div>
</div>

<div class="upper-dep">
  <div class="input-check">
    <input type="checkbox" id="color2" name="color2" value="Blue">
    <label for="color2"> Blue</label>
  </div>
</div>

<div class="higher-dep">
  <div class="input-check">
    <input type="checkbox" id="color3" name="color3" value="Green">
    <label for="color3"> Green</label>
  </div>
</div>

CSS

.lower-dep,
.upper-dep,
.higher-dep {
  display: none;
}

JavaScript

const departments = document.querySelector("#departments");
const lowerdep = document.querySelector(".lower-dep");
const upperdep = document.querySelector(".upper-dep");
const higherdep = document.querySelector(".higher-dep");

// 定义更新显示状态的函数
function updateDepartmentDisplay(selectedValue) {
  // 先隐藏所有div
  lowerdep.style.display = "none";
  upperdep.style.display = "none";
  higherdep.style.display = "none";

  // 根据选中值显示对应div
  switch(selectedValue) {
    case "lower":
      lowerdep.style.display = "block";
      break;
    case "upper":
      upperdep.style.display = "block";
      break;
    case "higher":
      higherdep.style.display = "block";
      break;
    default:
      // 默认值为空，保持全部隐藏
      break;
  }
}

// 页面初始化时执行一次，确保默认状态正确
updateDepartmentDisplay(departments.value);

// 添加select的change事件监听，选项变更时更新显示
departments.addEventListener("change", function() {
  updateDepartmentDisplay(this.value);
});

优化说明 #

• 改用===进行严格比较（原代码用=是赋值操作，会直接改变departments.value的值）
• 提取通用的显示更新函数，避免重复代码
• 添加change事件监听，确保选项变更时实时触发显示更新
• 每次更新前先隐藏所有div，避免多个内容同时显示
• 修正了HTML中重复的id属性（原代码三个checkbox的id都是color1，会导致标签关联错误）

内容的提问来源于stack exchange，提问作者Gildas Ckoffi