Javascript 下拉菜单显示/隐藏 Div

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