Question

我选择了包含选项1到10的方框，如下所示。如果我选择一个数字，那么我需要动态填充选择框正下方的那些输入文本框，每个输入文本框的左侧都有标签，例如label1 ，label2等。

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

修改

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

由于

Answer 1

使用它：

HTML code：

<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/

Answer 2

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

http://handlebarsjs.com/

http://knockoutjs.com/

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

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

动态创建输入文本框

3 个答案: