Javascript Dropdown Show / Hide Div

如何解决Javascript Dropdown Show / Hide 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>

我怎样才能做到这一点？

解决方法

我假设您希望在选择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\');
    }
}

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

在这里查看完整的脚本 ,

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

首先，我们获取选择的值，然后使用它遍历div。 Elms是名称为passenger的div，以elms [0]或passenger1开头。此代码首先隐藏所有div，然后重新显示所选的总数。 , 尝试这个：

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