通过 javascript 添加 HTML 控件答案

【问题标题】：Add HTML control(s) via javascript通过 javascript 添加 HTML 控件
【发布时间】：2010-09-21 11:45:29
【问题描述】：

有些东西在躲避我……这似乎很明显，但我无法完全弄清楚。

当用户更改下拉列表的值时，我想向页面（普通的旧 html）添加/删除几个 HTML 控件。一个例子是为每个（数量的）请求的房间添加或删除“这个房间的客人数量”文本框......

所以如果用户选择：

1个房间，有一个文本框

2个房间，有两个文本框

3 个房间，三个文本框

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

等等……

【问题讨论】：

标签： javascript html controls

【解决方案1】：

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

【讨论】：

【解决方案2】：

使用直接的 DOM 和 Javascript，您可能想要修改 DOM 对象的 IninterHtml 属性，该对象将包含文本框……很可能是一个 div。所以它看起来像：

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

使用像 jQuery 这样的 Javascript 库可以让事情变得更简单：

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

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

【讨论】：

另一个 jQuery 推荐 :)
哈！ ...我明白了...感谢您踢松散的蜘蛛网和绒毛。
没问题...周六晚上这么新鲜，我自己有点震惊:)

【解决方案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 />';
  } 
}

【讨论】：