通过javascript添加HTML控件

Question

一些东西正在逃避我......这似乎很明显，但我无法弄清楚。

我想在用户更改下拉列表的值时向页面添加/删除一对HTML控件（纯老HTML）。一个例子是添加或删除“在这个房间的客人数”的房间要求的文本框为每个（若干）一...

因此，如果用户选择：

1房，还有一个文本框

2个房间，有两个文本框

3个房间，三个文本框

回2个房间，两个文本框

和s o ...

Answer 1

使用直DOM和JavaScript你想修改DOM对象，它将包含文本框...最有可能的一个div的InnterHtml财产。因此，它看起来是这样的：

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

Answer 2

为您选择的房间列表，添加一个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> 

Answer 3

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