Question

我只是在学习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>

Answer 1

嗯，你只需要隐藏第二个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";
  }
}

注意：

确保您使用"First option"条件中的选项值中的正确"Second option"和if，否则您的情况将始终为假，您将始终位于{{1声明。

<强>演示：

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

Answer 2

您将整个select元素传递给showOptionsBelow函数。试试这个：

console.log(elem.options[elem.selectedIndex].value)

如何根据下拉列表选择显示/隐藏div？

2 个答案: