javascript - 如何根据下拉选择显示/隐藏 div？

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

注意:

确保您在 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>