Geek asks and answers

Javascript Dropdown Show / Hide Div

I use the following code to show / hide divs based on a drop down list. However, I want each higher number to display previous divs and just add another div. The user selects the "number of passengers", so the selected option 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?

+3
source share
4 answers

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

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');
    }
}
+2
source 
<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 the full script here

0
source 
<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`

select, div. - divs , [0] 1. div, , .

0

:

<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>
0

More articles:


All Articles