在输入上创建多个字段

时间:2017-07-16 03:16:16

标签: javascript jquery html

我正在尝试创建多个字段,当我输入一个数字来告诉它要创建多少...我已经使用了一些我之前编写的代码,但现在它已经不再有效了。

HTML:

<input type="text" name="rows">

jQuery的:

$(document).ready(function() {
    $('#rows').change(function() {
    var rows = $(this).val();

    for(i=0;i<=rows;i++) {
            $('#form').append('<div><input type="text" name="N' + i + '"></div>');
        $('#form').append('<div><select name="S'+ i +'"><option value="Text">Text</option><option value="editor">Editor</option></select></div>');
        $('#form').append('<div><input type="text" name="V' + i + '"></div>');
    }
  }
}

小提琴:https://jsfiddle.net/dc5665xk/1/

1 个答案:

答案 0 :(得分:3)

    {li}

    ID元素缺少rows元素。

  • 没有form个元素form作为ID

  • 语法错误,因为缺少关闭括号。

注意:var

中缺少for-loop个关键字

$(document).ready(function() {
  $('#rows').change(function() {
    var rows = $(this).val();
    for (var i = 0; i <= rows; i++) {
      $('#form').append('<div><input type="text" name="N' + i + '"></div>');
      $('#form').append('<div><select name="S' + i + '"><option value="Text">Text</option><option value="editor">Editor</option></select></div>');
      $('#form').append('<div><input type="text" name="V' + i + '"></div>');
    }
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<form id="form">
  <input type="text" name="rows" id="rows">
</form>