javascript - dynamically creating Input text boxes

Question

I have select box with options 1 to 10 as below .If i select a number then I need to dynamically populate those many input text boxes just below the select box, with each input text box having its label to its left e.g label1, label2 etc.

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

EDIT

If i wrap my select box & submit button inside <form></form> , then Jquery is creating the input text boxes outside the form.. any work around for this.In such cases, should we still create a placeholder using <div> Or we should create a placeholder using <tr id=''>. Thanks

Thanks

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

Answer 2

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

http://handlebarsjs.com/

http://knockoutjs.com/

诚然，对于这个特定的问题，这可能是矫枉过正，但我​​认为这是一种非常有用的技术，可以学习更高级的场景。

Answer 3

签出这个小提琴代码。

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