當(dāng)select元素包含相應(yīng)的值時，我試圖顯示一個div并隱藏其他div。

我創(chuàng)建了一個具有4個選項(xiàng)的select元素，默認(rèn)為空值加上其他三個選項(xiàng)，lower、upper、higher。我在下面放置了三個隱藏的div元素，包含三個選項(xiàng)的內(nèi)容:lower、upper和higher。我想根據(jù)select元素的值顯示和隱藏每個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>

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>

您需要將它包裝在事件偵聽器中，并在顯示之前隱藏所有元素:

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";
    }
});

這樣，每當(dāng)用戶選擇一個選項(xiàng)時，相應(yīng)的div就會顯示出來，其余的將被隱藏。

此外，您可能希望將if語句中的每個=替換為==因?yàn)閖avascript中的=是賦值，所以如果您賦值的值為true，if語句將運(yùn)行。您可能在尋找==，而不是相等比較運(yùn)算符。

完整片段:

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>