Javascript Dropdown Show/Hide Div

Question

I am using the following code to show/hide divs based on a dropdown selection. However, I want each higher number to keep the previous divs displayed and simply add another div. The user is selecting the "number of passengers" so the option selected should display that many divs.

<script>
function display_passengerDiv(e){
   document.getElementById('passenger1').style.display = "none";
   document.getElementById('passenger2').style.display = "none";
   document.getElementById('passenger3').style.display = "none";
   document.getElementById('passenger' + e).style.display = "block";
}
</script>

<select name="#" id="#" onChange="display_passengerDiv(this.selectedIndex);">
      <option selected="selected"> </option>
      <option >1</option>
      <option >2</option>
      <option >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>

How can I do this?

Answer 1

<script type="text/javascript">
function display_passengerDiv(){
    var numPass = document.getElementById('numPass').value;
    var elms = document.getElementsByName('passenger');
    for(var h = 0; h<elms.length; h++) {
        elms[h].style.display = 'none';
    }
    for(var i = 0; i < numPass; i++) {
        elms[i].style.display = 'block';
    }
}
</script>

<select id="numPass" onChange="javascript:display_passengerDiv();">
      <option selected="selected">Choose</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
</select>

<div id="passenger1" name="passenger" style="display:none;"> hey, 1 works </div>
<div id="passenger2" name="passenger" style="display:none;"> hey, 2 works </div>
<div id="passenger3" name="passenger" style="display:none;"> hey, 3 works </div>`enter code here`

First we get the value of the select and then use it to go through the divs. The elms is the divs with name passenger starting with elms[0] or passenger1. This code first hides all divs then reshows the total number that is selected.

Answer 2

I assume you want all three divs to display when 3 is selected? If so :

function display_passengerDiv(e) {
    var i, changeDisplay = function(id, value) {
        var arrayLength, j;
        if (typeof(id) === 'string') {
            document.getElementById('passenger' + id).style.display = value;
        } else {
            arrayLength = id.length;
            for(j = 0; j < arrayLength; j++) {
                changeDisplay(id[j], value);
            }
        }
    };

    changeDisplay(['1', '2', '3'], 'none');

    for(i = 1; i <= e; i++) {
        changeDisplay(i + '', 'block');
    }
}

Answer 3

<ul id="sddm">
    <li><a href="#" 
        onmouseover="mopen('m1')" 
        onmouseout="mclosetime()">Home</a>
        <div id="m1" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
        <a href="#">HTML Drop Down</a>
        <a href="#">DHTML Menu</a>
        <a href="#">JavaScript DropDown</a>
        <a href="#">Cascading Menu</a>
        <a href="#">CSS Horizontal Menu</a>
        </div>
    </li>
    <li><a href="#" 
        onmouseover="mopen('m2')" 
        onmouseout="mclosetime()">Download</a>
        <div id="m2" 
            onmouseover="mcancelclosetime()" 
            onmouseout="mclosetime()">
        <a href="#">ASP Dropdown</a>
        <a href="#">Pulldown menu</a>
        <a href="#">AJAX Drop Submenu</a>
        <a href="#">DIV Cascading Menu</a>
        </div>
    </li>
    <li><a href="#">Order</a></li>
    <li><a href="#">Help</a></li>
    <li><a href="#">Contact</a></li>
</ul>
<div style="clear:both"></div>

CSS CODE

    #sddm
    {   margin: 0;
        padding: 0;
        z-index: 30}

    #sddm li
    {   margin: 0;
        padding: 0;
        list-style: none;
        float: left;
        font: bold 11px arial}

    #sddm li a
    {   display: block;
        margin: 0 1px 0 0;
        padding: 4px 10px;
        width: 60px;
        background: #5970B2;
        color: #FFF;
        text-align: center;
        text-decoration: none}

    #sddm li a:hover
    {   background: #49A3FF}

    #sddm div
    {   position: absolute;
        visibility: hidden;
        margin: 0;
        padding: 0;
        background: #EAEBD8;
        border: 1px solid #5970B2}

        #sddm div a
        {   position: relative;
            display: block;
            margin: 0;
            padding: 5px 10px;
            width: auto;
            white-space: nowrap;
            text-align: left;
            text-decoration: none;
            background: #EAEBD8;
            color: #2875DE;
            font: 11px arial}

        #sddm div a:hover
        {   background: #49A3FF;
            color: #FFF}

JS CODE

// Copyright 2006-2007 javascript-array.com

var timeout = 500;
var closetimer  = 0;
var ddmenuitem  = 0;

// open hidden layer
function mopen(id)
{   
    // cancel close timer
    mcancelclosetime();

    // close old layer
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

    // get new layer and show it
    ddmenuitem = document.getElementById(id);
    ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
    if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
    closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
    if(closetimer)
    {
        window.clearTimeout(closetimer);
        closetimer = null;
    }
}

// close layer when click-out
document.onclick = mclose; 

See this full script here

Answer 4

Try this:

<script>

   function display_passengerDiv(e){
      var i, passenger,
      dropdown = document.getElementById('passenger_dropdown'),
      numPassengers = dropdown.options.length - 1;
      val = dropdown.options[e].text;

      if (val.length < 1) { 
          passenger = 0; 
      } else { 
          passenger = parseInt(val); 
      }

      for(i = 1; i <= numPassengers; i++) { 
         if (i <= passenger) {
            document.getElementById('passenger' + i).style.display = "block";
         } else {
            document.getElementById('passenger' + i).style.display = "none";
         }
      }
   }

</script>

<select name="#" id="passenger_dropdown"
        onChange="display_passengerDiv(this.selectedIndex);">
      <option selected="selected"></option>
      <option >1</option>
      <option >2</option>
      <option >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>