Добавить элементы управления HTML через javascript

для выбранного списка комнат добавьте обработчик события onchange, который будет отображать / скрывать текстовые поля.

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

Используя прямые DOM и Javascript, вы захотите изменить свойство InnterHtml объекта DOM, который будет содержать текстовые поля ... скорее всего, div. Это будет выглядеть примерно так:

var container = document.getElementById("myContainerDiv");
var html;
for(var i = 0; i < selectedRooms; i++)
{
    html = html + "<input type=text ... /><br />";
}
container.innerHtml = html;

Использование библиотеки Javascript, такой как jQuery, может немного упростить задачу:

var html;
for(var i = 0; i < selectedRooms; i++)
{
    html = html + "<input type=text ... /><br />";
}

$("#myContainerDiv").append(html);

учитывая HTML:

<select name = "rooms" id = "rooms">
  <option value = "1">1 room</option>
  <option value = "2">2 rooms</option>
  <option value = "3">3 rooms</option>
</select>
<div id = "boxes"></div>

javascript:

document.getElementById('rooms').onchange = function() {
  var e = document.getElementById('boxes');
  var count = parseInt(document.getElementById('rooms').value);
  e.innerHTML = '';

  for(i = 1; i <= count; i++) {
    e.innerHTML += 'Room '+i+' <input type = "text" name = "room'+i+'" /><br />';
  } 
}