Javascript 如何根据文本框值添加多个输入字段？

我已经创建了一个add输入字段函数，它运行良好。我想在输入字段编号的基础上添加许多输入字段。不幸的是，我刚开始时找不到合适的结果。 这是我的JQ代码

$(document).ready(function() {
    var scntDiv = $('#add_words');
    var wordscount = 1;
    var i = $('.line').size() + 1;

    $('#add').click(function() {
        var v = $("#inputs").val();
        alert(v);
        wordscount++;
        $('<div class="line">Word is ' + wordscount + '<input type="text" value="' + wordscount + '" /><a class="remScnt" href="#">Remove</a></div>').appendTo(scntDiv);
        i++;
        return false;
    });

    //    Remove button
    $('#add_words').on('click', '.remScnt', function() {
        if (i > 1) {
            $(this).parent().remove();
            i--;
        }
        return false;
    });
});

还有HTML代码

<select id="inputs" style="width:60px;">
    <option value="1">1</option>
    <option value="2">2</option>
    <option value="3">3</option>                      
    <option value="4">4</option>
    <option value="5">5</option>
    <option value="6">6</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    <option value="10">10</option>
</select>
<a id="add" href="#">Add</a>
<div id="add_words"></div>

实际上，我需要根据我们在id=inputs中选择了多少来添加输入字段

像这样：

$(document).ready(function() {
    var scntDiv = $('#add_words');
    var wordscount = 1;
    var i = $('.line').size() + 1;

    $('#add').click(function() {
        var inputFields = parseInt($('#inputs').val());
        for (var n = i; n < inputFields; ++ n){
            wordscount++;
            $('<div class="line">Word is ' + wordscount + '<input type="text" value="' + wordscount + '" /><a class="remScnt" href="#">Remove</a></div>').appendTo(scntDiv);
            i++;
        }  
        return false;
    });

    //    Remove button
    $('#add_words').on('click', '.remScnt', function() {
        if (i > 1) {
            $(this).parent().remove();
            i--;
        }
        return false;
    });
});

请在此处查看它的实际操作：

检查此项

HTML

Jquery

---

它正在工作。您能告诉我一个解决方案，根据从id=输入中选择的值来固定输入编号吗。如果您知道，谢谢您的帮助，它将从id=输入和循环中获取值，直到达到该值为止。不过，我可能没有正确理解您的问题：只需获取var inputFields的值，如下所示：parseInt$'inputs'.val；。如果选择2，inputFields将把值2作为int保存。@Marco Johannesen我的问题变成这样，我需要输入文件，根据我从id=inputs中选择了多少。当选择3时，三个输入仅当选择5时，仅显示五个输入，与@EliasVanOotegem代码的更新代码类似。。谢谢，我不知道您可以直接在select元素上调用它：

<select id="inputs" style="width:60px;">
    <option>1</option>
    <option>2</option>
    <option>3</option>                      
    <option>4</option>
    <option>5</option>
    <option>6</option>
    <option>7</option>
    <option>8</option>
    <option>9</option>
    <option>10</option>
</select>
<a id="add" href="#">Add</a>

<div id="add_words"></div>

$(document).ready(function() {
    var scntDiv = $('#add_words');
    var wordscount = 1;
    var i = $('.line').size() + 1;
  var counter=1;
    $('#add').click(function() {
        var inputFields = parseInt($('#inputs').val());

        if(counter>inputFields){
            alert("Only "+inputFields+" textboxes allow");
            return false;
    }   



            $('<div class="line">Word is ' + counter+ '<input type="text" value="' + counter+ '" /><a class="remScnt" href="#">Remove</a></div>').appendTo(scntDiv);

      counter++;

    });

    //    Remove button
    $('#add_words').on('click', '.remScnt', function() {

        if (counter > 1) {
            $(this).parent().remove();
            counter--;
        }
        return false;
    });
});