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