通过javascript添加HTML控件

有什么事让我难以捉摸。。。这似乎很明显，但我不太明白

当用户更改下拉列表的值时，我想在页面中添加/删除几个HTML控件（纯旧HTML）。例如，为每个请求的房间添加或删除“此房间中的客人数”文本框

因此，如果用户选择：

1个房间，有一个文本框

2个房间，有两个文本框

3个房间，3个文本框

返回到两个房间，两个文本框

---

等等…

对于您选择的文件室列表，添加一个onchange事件处理程序，该处理程序将显示/隐藏BOSE文本

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

//使用适用的lib调用交换美元（如果可用）
函数$（id）{
返回文档.getElementById（id）；
}
功能调整文本（obj）{
var roomTotal=4；
var计数=对象选择指数；
//显示/隐藏不需要的文本框。。。
对于（var i=0；i使用纯DOM和Javascript，您可能希望修改DOM对象的InnterHtml属性，该属性将包含文本框…最有可能是div。因此它看起来类似于：

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

var container=document.getElementById（“myContainerDiv”）；
var-html；
对于（变量i=0；i”；
}
container.innerHtml=html；

使用像jQuery这样的Javascript库可以使事情稍微简单一些：

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

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

var-html；
对于（变量i=0；i”；
}
$（“#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>


1间
2个房间
3个房间

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

document.getElementById（'rooms'）。onchange=function（）{
var e=document.getElementById（'box'）；
var count=parseInt（document.getElementById（'rooms'）.value）；
e、 innerHTML=''；
对于（i=1；我为jQuery提供了另一个建议：）哈！…我明白了…谢谢你踢松了蜘蛛网和绒毛。没问题…我自己有点震惊，因为它在周六晚上这么新鲜：）