如何基于select下拉框选中项切换对应元素的显示隐藏状态

你只需要给select元素绑定值变化事件，根据选中值修改对应div的display样式属性即可实现显隐切换，display: none会让元素完全隐藏且不占用页面空间，是实现这类需求最常用的属性。

完整的原生JavaScript实现代码如下，你可以把这段代码放在HTML文件</body>标签之前即可生效：

document.addEventListener('DOMContentLoaded', function() {
  // 获取页面元素
  const optionSelect = document.getElementById('options');
  const divToToggle = document.getElementById('hide-this-div');
  const anotherDiv = document.getElementById('div-to-show');

  // 切换显隐的处理函数
  function handleSelectChange() {
    if (optionSelect.value === 'option1') {
      // 选中option1时的状态
      divToToggle.style.display = 'none';
      anotherDiv.style.display = 'block';
    } else {
      // 选中option2时的状态
      divToToggle.style.display = 'block';
      anotherDiv.style.display = 'none';
    }
  }

  // 页面加载完成后先初始化一次显隐状态
  handleSelectChange();
  // 绑定select值变化事件
  optionSelect.addEventListener('change', handleSelectChange);
});

你的现有HTML代码里有两个div使用了重复的iddropDownSelect2，HTML规范要求id在整个文档内必须唯一，建议你把第二个重复的id修改为dropDownSelect3，避免后续其他DOM操作出现异常。

如果你的div-to-show默认布局不是块级元素（比如用了flex、grid布局），把代码里对应位置的block替换为你元素原本的display属性值即可。

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