[英]Add HTML control(s) via javascript
Something is eluding me ... it seems obvious, but I can't quite figure it out. 有些东西在逃避我......似乎很明显,但我无法弄明白。
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. 我想在用户更改下拉列表的值时向页面添加/删除几个HTML控件(普通的旧HTML)。 An example is to add or remove a "number of guests in this room" textbox for each (of a number) of rooms requested ...
一个例子是为所请求的每个(多个)房间添加或删除“此房间中的客人数量”文本框...
So if a user selects: 因此,如果用户选择:
1 room, there is one text box 1个房间,有一个文本框
2 rooms, there are two text boxes 2个房间,有两个文本框
3 rooms, three text boxes 3个房间,三个文本框
back to 2 rooms, two text boxes 回到2个房间,两个文本框
and so on ... 等等 ...
Using straight DOM and Javascript you would want to modify the InnterHtml property of a DOM object which will contain the text boxes...most likely a div. 使用直接DOM和Javascript,您可能希望修改DOM对象的InnterHtml属性,该对象将包含文本框...很可能是div。 So it would look something like:
所以它看起来像:
var container = document.getElementById("myContainerDiv");
var html;
for(var i = 0; i < selectedRooms; i++)
{
html = html + "<input type=text ... /><br />";
}
container.innerHtml = html;
Using a Javascript library like jQuery could make things slightly easier: 使用像jQuery这样的Javascript库可以使事情变得更容易:
var html;
for(var i = 0; i < selectedRooms; i++)
{
html = html + "<input type=text ... /><br />";
}
$("#myContainerDiv").append(html);
for your select list of rooms, add an onchange event handler that will show/hide the text boses. 对于您选择的房间列表,添加一个onchange事件处理程序,它将显示/隐藏文本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>
given 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: 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 />';
}
}
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.