当选择元素保存相应的值时，我试图显示一个div并隐藏其他div。
我创建了一个包含 4 个选项的选择元素，默认值为空值，另外三个选项为：下、上、上。我在下面放置了三个隐藏的 div 元素，其中包含 3 个选项中每个选项的内容：下、上和上。我想根据选择元素的值显示和隐藏每个 div。这是我的代码：
2
942const 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>
Copyright 2014-2025 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号
收藏
eventListener来根据选择隐藏和显示元素，并根据需要删除或添加d-none类。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>您需要将其包装在事件侦听器中，并在显示之前隐藏所有元素：
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>