Afficher le div en fonction de la valeur de l'élément sélectionné à l'aide de JavaScript et CSS

Question

J'essaie d'afficher un div et de masquer les autres div lorsque l'élément sélectionné contient la valeur correspondante.

J'ai créé un élément de sélection avec 4 options, la valeur par défaut est vide et les trois autres options sont : vers le bas, vers le haut et vers le haut. J'ai placé ci-dessous trois éléments div cachés qui contiennent du contenu pour chacune des 3 options : bottom, top et top. Je souhaite afficher et masquer chaque div en fonction de la valeur de l'élément sélectionné. Voici mon 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. Les identifiants sont uniques, plusieurs éléments ne peuvent pas avoir le même identifiant, j'ai donc modifié cela.
2. A également ajouté une classe eventListener 来根据选择隐藏和显示元素，并根据需要删除或添加 d-none.
3. Le vôtre 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

Vous devez l'envelopper dans un écouteur d'événement et masquer tous les éléments avant de les afficher :

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

De cette façon, chaque fois que l'utilisateur sélectionne une option, le div correspondant sera affiché, tandis que le reste sera masqué.

De plus, vous devez ajouter = 替换为 ==，因为 javascript 中的 = 是赋值，因此如果您分配的值是真值，则 if 语句将运行。您可能正在寻找 == à chaque instruction if, qui est l'opérateur de comparaison d'égalité.

Clip complet :

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>