<p>Something is eluding me ... it seems obvious, but I can't quite figure it out.</p>

<p>I want to add/remove a couple of HTML controls to a page (plain old html) when a user changes value of a dropdown list.  An example is to add or remove a "number of guests in this room" textbox for each (of a number) of rooms requested ... </p>

<p>So if a user selects:</p>

<p>1 room, there is one text box</p>

<p>2 rooms, there are two text boxes</p>

<p>3 rooms, three text boxes </p>

<p>back to 2 rooms, two text boxes</p>

<p>and so on ...</p>

for your select list of rooms, add an onchange event handler that will show/hide the text boses.
```
```
<script>
  //swap $ with applicable lib call (if avail)
  function $(id){
    return document.getElementById(id);
  }
  function adjustTexts(obj){
    var roomTotal = 4;
    var count = obj.selectedIndex;
    //show/hide unrequired text boxes...
    for(var i=0;i<roomTotal;i++){
      if(i < count){
        $('room'+ (i+1)).style.display = 'block';
      } else {
        $('room'+ (i+1)).style.display = 'none';
      }
    }
  }
</script>

<select name="rooms" onchange="adjustTexts(this);">
  <option>1</option>
  <option>2</option>
  <option>3</option>
  <option>4</option>
</select>

<div id="room1">
  <label>Room 1</label>:<input type="text" name="room1text"/>
</div>

<div id="room2" style="display:none;">
  <label>Room 2</label>:<input type="text" name="room2text"/>
</div>

<div id="room3" style="display:none;">
  <label>Room 3</label>:<input type="text" name="room3text"/>
</div>

<div id="room4" style="display:none;">
  <label>Room 4</label>:<input type="text" name="room4text"/>
</div>
```
```