为何我的JavaScript代码无法将未选中的div元素设为display:none？

你的下拉框切换逻辑失效，核心原因是数组处理错误，以下是具体问题和修复方案：

关键错误点 #

• 数组方法误用：JavaScript数组没有append()方法，你用optionsArr.append(values)导致数组未正确初始化，且values包含第一个空值选项，后续遍历会尝试查找id为空的元素，引发无效操作。
• 数组维度错误：即便把append改成push，optionsArr会变成二维数组（[[ "", "tv", "cooker" ]]），循环时拿到的是子数组而非单个value，无法匹配元素id。
• 冗余无效代码：opTest变量的选择器缺少#（应为#appliance-type option）且未被使用，可直接删除。

修正后的完整代码 #

HTML（无改动） #

<main>
  <h1>Add appliance</h1>
  <p>Please provide the details for the appliance</p>
  <form action="">
    <fieldset style="border: none">
      <label for="appliance-type">Appliance type:</label>
      <select onchange="show(value)" class="options" name="appliance-type" id="appliance-type">
        <option value="" selected disabled>Choose appliance</option>
        <option value="tv">TV</option>
        <option value="cooker">Cooker</option>
      </select>
      <div class="tv-options-container" id="tv">
        <label for="manufacturer">Manufacturer: &#160;</label>
        <select class="options" name="tv-manufacturer" id="tv-manufacturer">
          <option value="" selected disabled></option>
          <option value="narkasse">Narkasse</option>
        </select>
        <br />
        <label for="model-name">Model Name</label>
        <input type="text" name="model-name" id="model-name" />
        <br />
        <hr />
        <label for="">Display Type</label>
        <select class="option" name="" id="">
          <option value="" selected disabled></option>
          <option value="display-type">LED</option>
        </select>
      </div>

      <div class="cooker-options-container" style="display: none" id="cooker">
        <p>cooker</p>
        <p>cooker</p>
        <p>cooker</p>
      </div>
    </fieldset>
  </form>
</main>

CSS（无改动） #

* {
  box-sizing: border-box;
}
fieldset {
  padding: 0;
}
.options {
  height: 30px;
  -moz-appearance: none; /* Firefox */
  -webkit-appearance: none; /* Safari and Chrome */
  appearance: none;
  padding-right: 1.25em;
  padding-left: 0.25em;
  border-radius: 10px;
  background-image: url("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' version='1.1' height='10px' width='15px'%3E%3Ctext x='0' y='11' fill='lightblue'%3E%E2%96%BE%3C/text%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-size: 1.5em 1em;
  background-position: right center;
  margin-bottom: 20px;
}

.tv-options-container,
.cooker-options-container {
  display: none;
}

JavaScript（核心修正） #

// 提取有效选项值（过滤空值）
const validOptions = Array.from(document.getElementById("appliance-type").options)
  .map(opt => opt.value)
  .filter(val => val !== "");

function show(value_) {
  // 先隐藏所有容器
  validOptions.forEach(opt => {
    document.getElementById(opt).style.display = "none";
  });
  // 再显示当前选中的容器
  if (value_) {
    document.getElementById(value_).style.display = "block";
  }
}

更简洁的优化方案（可选） #

无需维护选项数组，直接通过类名批量控制容器：

function show(value_) {
  // 获取所有电器选项容器
  const allContainers = document.querySelectorAll(".tv-options-container, .cooker-options-container");
  // 隐藏所有容器
  allContainers.forEach(container => container.style.display = "none");
  // 显示选中的容器
  if (value_) {
    document.getElementById(value_).style.display = "block";
  }
}

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