Javascript下拉菜单显示/隐藏分区

Question

我使用以下代码根据下拉选项显示/隐藏div。但是，我希望每个更高的数字保持以前的div显示，并简单地添加另一个div。用户选择“乘客人数”，因此选择的选项应显示多个div。

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

我该怎么做？

Answer 1

我假设你想在选择3时显示所有三个div？如果是这样的：

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 2

<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代码

#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代码

// 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; 

看到这个完整的脚本here

Answer 3

<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。榆树是名字乘客以榆树[0]或乘客1开始的div。此代码首先隐藏所有div，然后重新显示所选的总数。

Answer 4

试试这个：

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