使用 JavaScript 和 CSS 根据选择元素值显示 div

Question

当选择元素保存相应的值时，我试图显示一个div并隐藏其他div。

我创建了一个包含 4 个选项的选择元素，默认值为空值，另外三个选项为：下、上、上。我在下面放置了三个隐藏的 div 元素，其中包含 3 个选项中每个选项的内容：下、上和上。我想根据选择元素的值显示和隐藏每个 div。这是我的代码：

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

if (departments.value = "") {
  lowerdep.style.display = "none";
  upperdep.style.display = "none";
  higherdep.style.display = "none";

} else if (departments.value = "lower") {
  lowerdep.style.display = "block";

} else if (departments.value = "upper") {
  upperdep.style.display = "block";

} else {
  higherdep.style.display = "block";
}

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

<div class="">
  <div class="">
    <label class="">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="color1" name="color1" value="Red">
    <label for="color1"> Red</label>
  </div>
</div>

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

Answer 1

1. ID 是唯一的，多个元素不能具有相同的 ID，因此我对此进行了更改。
2. 还添加了一个 eventListener 来根据选择隐藏和显示元素，并根据需要删除或添加 d-none 类。
3. 您的 if/else 语句也是错误的，= 用于赋值，== 用于比较。您还可以像我的示例一样使用 switch case。

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

departments.addEventListener("change", function(){
  lowerdep.classList.add("d-none");
  upperdep.classList.add("d-none");
  higherdep.classList.add("d-none");
  switch (departments.value) {
    case 'lower':
        lowerdep.classList.remove("d-none");
    break;
    case 'upper':
        upperdep.classList.remove("d-none");
    break;
    case 'higher':
        higherdep.classList.remove("d-none");
    break;
  }
})

.d-none {
  display: none;
}

<div class="">
    <div class="">
      <label class="">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 d-none">
    <div class="input-check">
      <input type="checkbox" id="color-lower" name="color" value="Red">
      <label for="color-lower"> Red lower</label>
    </div>
  </div>

  <div class="upper-dep d-none">
    <div class="input-check">
      <input type="checkbox" id="color-upper" name="color" value="Red">
      <label for="color-upper"> Red upper</label>
    </div>
  </div>

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

Answer 2

您需要将其包装在事件侦听器中，并在显示之前隐藏所有元素：

departments.addEventListener("change", function() {
    lowerdep.style.display = "none";
    upperdep.style.display = "none";
    higherdep.style.display = "none";
    
    if (departments.value == "lower") {
      lowerdep.style.display = "block";
    } else if (departments.value == "upper") {
      upperdep.style.display = "block";
    } else if (departments.value == "higher") {
      higherdep.style.display = "block";
    }
});

这样，每当用户选择一个选项时，就会显示相应的 div，而其余部分将被隐藏。

此外，您还需要将 if 语句中的每个 = 替换为 ==，因为 javascript 中的 = 是赋值，因此如果您分配的值是真值，则 if 语句将运行。您可能正在寻找 ==，即相等比较运算符。

完整片段：

const departments = document.querySelector("#departments");
const lowerdep = document.querySelector(".lower-dep");
const upperdep = document.querySelector(".upper-dep");
const higherdep = document.querySelector(".higher-dep");
departments.addEventListener("change", function() {
    lowerdep.style.display = "none";
    upperdep.style.display = "none";
    higherdep.style.display = "none";
    
    if (departments.value == "lower") {
      lowerdep.style.display = "block";
    } else if (departments.value == "upper") {
      upperdep.style.display = "block";
    } else if (departments.value == "higher") {
      higherdep.style.display = "block";
    }
});

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

<div class="">
  <div class="">
    <label class="">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"> Lower dep: Red</label>
  </div>
</div>

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

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