Home/ Questions/Q 5977835
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-22T21:25:39+00:00

I am trying to show divs based on input from a dropdown menu. <script

  • 0

I am trying to show divs based on input from a dropdown menu.

<script type="text/javascript">
function display_div(show){
   document.getElementById(show).style.display = "";
}
</script>

<select name="passengers" id="passengers">
      <option selected="selected"> </option>
      <option onclick="display_div('passenger1');">1</option>
      <option onclick="display_div('passenger2');">2</option>
      <option onclick="display_div('passenger3');">3</option>
</select>

Nothing happens when I select an option. What am I doing wrong here?

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok after thinking back to some old problems i had, i remembered a problem that IE and Chrome have with the onClick event.

    <script type="text/javascript">
function display_div(show){
   document.getElementById('passenger1').style.display = "none";
   document.getElementById('passenger2').style.display = "none";
   document.getElementById('passenger3').style.display = "none";
   document.getElementById(show).style.display = "block";

}

</script>

<select id="optionList" onchange="display_div(document.getElementById('optionList').value);">
  <option selected="selected"> </option>
  <option value="passenger1">1</option>
  <option value="passenger2">2</option>
  <option value="passenger3">3</option>
</select>

<div id="passenger1" style="display:none;"> hey, 1 works </div>
<div id="passenger2" style="display:none;"> hey, 2 works </div>
<div id="passenger3" style="display:none;"> hey, 3 works </div>

    The solution was to make the function call on the select and use onchange. Then it gets the selected options value and gives it to the function to work its magic

    • 0