我刚刚学习 JavaScript,我需要一些帮助。我找到了一种方法,如果选择前两个选项之一,则显示 #divA,但如果选择第三个选项,如何显示 #divB?我不希望显示这些 div,除非在下拉菜单中选择了相应的选项。
HTML:
<select class="form-control" onchange="showOptionsBelow(this)">
<option></option>
<option value="First option">First option</option>
<option value="Second option">Second option</option>
<option value="Third option">Third option</option>
</select>
<div id="divA" style="display:none;"></div>
<div id="divB" style="display:none;"></div>
Javascript:
<script>
function showOptionsBelow(elem) {
if (elem.value == "First Option" || elem.value == "Second Option") {
document.getElementById("divA").style.display = "block";
} else {document.getElementById("divA").style.display = "none";
}
}
</script>
最佳答案
那么,您只需要在显示第一个 div 时隐藏第二个 div,在隐藏第一个 div 时显示第二个 div,对第二个 div 执行相同的操作:
if (elem.value == "First option" || elem.value == "Second option") {
document.getElementById("divA").style.display = "block";
document.getElementById("divB").style.display = "none";
} else {
document.getElementById("divB").style.display = "block";
document.getElementById("divA").style.display = "none";
}
}
注意:
确保您在 if
条件中的选项值中使用了正确的“第一个选项”
和 “第二个选项”
,否则您的条件将始终为 false,并且您将始终陷入 else
语句中。
演示:
function showOptionsBelow(elem) {
if (elem.value == "First option" || elem.value == "Second option") {
document.getElementById("divA").style.display = "block";
document.getElementById("divB").style.display = "none";
} else {
document.getElementById("divB").style.display = "block";
document.getElementById("divA").style.display = "none";
}
}
<select class="form-control" onchange="showOptionsBelow(this)">
<option></option>
<option value="First option">First option</option>
<option value="Second option">Second option</option>
<option value="Third option">Third option</option>
</select>
<div id="divA" style="display:none;">A</div>
<div id="divB" style="display:none;">B</div>
关于javascript - 如何根据下拉选择显示/隐藏 div?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47024438/