Saya cuba menunjukkan satu div dan menyembunyikan div lain apabila elemen yang dipilih memegang nilai yang sepadan.
Saya mencipta elemen pemilihan dengan 4 pilihan, nilai lalai kosong dan tiga pilihan lain ialah: bawah, atas dan atas. Saya telah meletakkan tiga elemen div tersembunyi di bawah yang mengandungi kandungan untuk setiap satu daripada 3 pilihan: bawah, atas dan atas. Saya ingin menunjukkan dan menyembunyikan setiap div berdasarkan nilai elemen yang dipilih. Ini kod saya:
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>
![[Web front-end] Permulaan pantas Node.js](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
eventListener来根据选择隐藏和显示元素，并根据需要删除或添加d-nonekelas.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>Anda perlu membungkusnya dalam pendengar acara dan menyembunyikan semua elemen sebelum menunjukkannya:
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"; } });Dengan cara ini, setiap kali pengguna memilih pilihan,
divyang sepadan akan dipaparkan, manakala selebihnya akan disembunyikan.Selain itu, anda perlu menambah
=替换为==，因为 javascript 中的=是赋值，因此如果您分配的值是真值，则 if 语句将运行。您可能正在寻找==pada setiap pernyataan if, yang merupakan pengendali perbandingan kesamaan.Klip penuh:
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>