Zeigen Sie div basierend auf dem ausgewählten Elementwert mit JavaScript und CSS an

Question

Ich versuche, ein Div anzuzeigen und andere Divs auszublenden, wenn das ausgewählte Element den entsprechenden Wert enthält.

Ich habe ein Auswahlelement mit 4 Optionen erstellt, der Standardwert ist leer und die anderen drei Optionen sind: nach unten, nach oben und nach oben. Ich habe unten drei versteckte div-Elemente platziert, die Inhalte für jede der drei Optionen enthalten: unten, oben und oben. Ich möchte jedes Div basierend auf dem Wert des ausgewählten Elements ein- und ausblenden. Das ist mein Code:

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>