Javascript下拉菜单/隐藏Div [英] Javascript Dropdown Show/Hide Div

问题描述

我使用以下代码根据下拉列表选项显示/隐藏div。但是，我希望每个更高的数字保持以前的div显示，只需添加另一个div。用户正在选择乘客人数，所以选择的选项应该显示很多div。

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>

我该怎么做？

推荐答案

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

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');
    }
}

这篇关于Javascript下拉菜单/隐藏Div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！