如何根據下拉選擇顯示/隱藏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條件中的選項值中使用正確的"First option"和"Second option" ，否則您的條件將始終為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> 

Answer 2

您要將整個select元素傳遞給showOptionsBelow函數。 嘗試這個：

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