lundi 30 octobre 2017

How can I show/hide divs depending on dropdown selection?

I am just learning javascript and I could use some help. I have found a way to show #divA if one of the first two options are selected but how can I show #divB if the third option is selected? I don't want these divs to show unless the corresponding option is selected in the dropdown menu.

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>

Aucun commentaire:

Enregistrer un commentaire