JavaScript切换选中div时自动隐藏上一个已显示div的方法

你的代码有3个核心逻辑错误，才会出现描述的异常：

• previous_value是定义在togglevisible()内部的局部变量，clean()函数执行时根本访问不到这个变量，会直接抛出ReferenceError导致JS执行中断，这就是调用clean()时页面渲染异常、内容被清空的直接原因。且你在togglevisible()里刚拿到当前选中值就直接赋值给previous_value，这个变量永远存不住上一次选中的元素ID，自然没法实现切换时自动隐藏旧元素。
• 下拉框前两个默认选项没有设置value属性，选中这两项时取到的value是空值，匹配不到对应DOM节点时会触发报错。
• 没有给两个内容div设置初始隐藏样式，页面首次加载时两个div会直接全部展示。

JavaScript部分 #

// 把上一次选中的元素ID存到外层作用域，作为全局状态共享，初始为null
let previous_value = null;

function clean() {
  // 存在上一个展示的元素时，先将其隐藏
  if (previous_value !== null) {
    const lastEl = document.getElementById(previous_value);
    lastEl && (lastEl.style.display = "none");
  }
  togglevisible();
}

function togglevisible() {
  const dropdown = document.getElementById("dropdownCenterBtn");
  const current_value = dropdown.options[dropdown.selectedIndex].value;

  // 选中无value的默认选项时，不展示任何内容，重置状态后直接返回
  if (!current_value) {
    previous_value = null;
    return;
  }

  const currentEl = document.getElementById(current_value);
  currentEl && (currentEl.style.display = "flex");
  // 展示完当前元素后，更新上一次选中的ID记录
  previous_value = current_value;
}

// 页面加载完成后，默认隐藏所有内容div
window.addEventListener("DOMContentLoaded", () => {
  document.getElementById("div1").style.display = "none";
  document.getElementById("div2").style.display = "none";
});

HTML部分 #

只需要给前两个默认选项补上空的value属性即可，其余结构不需要改动：

<div class="dropdown-center">
  <select class="dropdown-menu" id="dropdownCenterBtn" onchange="clean()">
    <option value="">Courses List</option>
    <option value="">------------</option>
    <option value="div1">Introduction to Computer Science</option>
    <option value="div2">Web Programming with Python and Javascript</option>
  </select>
</div>

<div class="div1" id="div1">
  <h3>Introduction</h3>
</div>

<div class="div2" id="div2">
  <h3>Web Programming</h3>
</div>

• 将存储历史选中ID的变量提升到两个函数的外层作用域，解决变量无法访问、历史值存不住的问题
• 调整previous_value的赋值时机：等当前元素成功展示后再更新记录，保证下次切换时能准确找到需要隐藏的旧元素
• 增加DOM元素存在性判断，避免ID匹配失败时抛出错误中断整个JS执行
• 新增页面初始化逻辑，默认隐藏所有内容区块，解决首屏加载时元素全部显示的问题
• 兼容下拉框默认选项的空值场景，选中默认项时自动清空展示状态

内容的提问来源于stack exchange，提问作者var-log