动态创建输入文本框答案

【问题标题】：dynamically creating Input text boxes动态创建输入文本框
【发布时间】：2013-09-13 03:39:34
【问题描述】：

我有如下选项 1 到 10 的选择框。如果我选择一个数字，那么我需要动态填充选择框下方的许多输入文本框，每个输入文本框的左侧都有其标签，例如 label1 ，标签2等。

<form>
 <select>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
 </select> 
 <input type="submit" value="Submit">
</form>

编辑

如果我在 <form></form> 内包装我的选择框和提交按钮，那么 Jquery 将在表单之外创建输入文本框.. 任何解决方法。在这种情况下，我们是否仍应使用 <div> 创建占位符或者我们应该使用<tr id=''> 创建一个占位符。谢谢

谢谢

【问题讨论】：

你在代码中使用 jquery 吗？
是的..如果它适用于 IE8 那就太好了。

标签： javascript jquery

【解决方案1】：

使用它：

HTML 代码：

<select id="select">
   <option>select</option>
  <option value="1">1</option>
  <option value="2">2</option>
  <option value="3">3</option>
  <option value="4">4</option>
</select> 
<div id = "textbox_div"></div>
<input type="submit" value="Submit">

jQuery 代码：

jQuery('#select').change(function(){
    var val = jQuery(this).val();
    var innerhtml = '';
    for(var i = 0;i<val;i++){
        innerhtml += "<label> label"+(i+1)+" :</label><input type='text' id='textbox"+(i+1)+"' size=50></br>";
    }
    jQuery('#textbox_div').html(innerhtml);
});

这是工作演示：http://jsfiddle.net/g3Be3/

【讨论】：

谢谢。看起来很棒。
如果我将我的选择框和提交按钮包装在
中，那么 Jquery 将在
之外创建输入文本框。在这种情况下，我们应该仍然使用
创建一个占位符还是应该使用创建一个占位符。谢谢。

【解决方案2】：

这当然可以使用简单的 JQuery，但我鼓励您研究基于模板的解决方案：想到的两个框架是 KnockoutJS 和 HandlebarsJS。这里的关键是避免使用 JQuery 循环出标记是很好的，而是使用基于模板的数据绑定：

http://handlebarsjs.com/

http://knockoutjs.com/

当然，对于这个特定问题来说，这可能有点过头了，但我认为这是一种非常有用的技术，可以学习更高级的场景。

【讨论】：

【解决方案3】：

结帐this小提琴代码。

$('#mySelect').on('change', function(){
    var $textboxes = '';
    for(var i = 1; i <= $(this).val(); i++)
    {
        $textboxes += '<label>Textbox ' + i + '</label><input></input>';
    }
    $('#holder').html($textboxes);
});

【讨论】：