Javascript Dropdown Show/Hide Div

Question

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>

How can I do this?

Answer 1

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