jQuery：根据用户输入复制 X 数量的 div答案

【问题标题】：jQuery: Duplicate X amount of divs based on user inputjQuery：根据用户输入复制 X 数量的 div
【发布时间】：2011-04-01 17:46:43
【问题描述】：

我正在构建一个动态的就业申请表。我想要一个询问以前雇主数量的字段，当他们输入一个数字说 3 时，它将用这些字段复制一个 div 3 次，随后在每个名称和值字段的末尾加上一个数字，例如：field1、field2、字段 3。

我需要的字段：雇主姓名、职务、主管、地址、州、邮编、电话

这有意义吗？我该怎么做呢？我没有代码需要一个 html 输入字段。

【问题讨论】：

您有一些我们可以使用的现有代码吗？当然，这是有道理的。
我不知道如何或从哪里开始。
你以前用过jQuery吗？你懂JS吗？
我熟悉 jQuery。我以前用过很多次，但不知道怎么做。

标签： jquery ajax

【解决方案1】：

我会用 for 循环和 jquery 的 append() 函数来做。

$("#employee_fields_generate").click(function ()
{
     $("#employee_fields").html("");
    var number_employees = $("input[name='number_employees']").val();

    for (i=0; i<=number_employees; i++)
    {
        $("#employee_fields").append('<div id="employee'+i+'"> //your field inputs go here </div>');
    }
});


<form id="employees_form">
    <label for="number_employees">Number of Employees:</label><input type="text" name="number_employees" />
    <button id="employee_fields_generate">Generate Fields!</button>
    <div id="employee_fields">
    </div>
</form>

【讨论】：

代码可以使用一些优化，但这是一般的想法，是的。
有没有办法即时完成。 IE没有按钮，他们点击字段，输入一个数字点击别的东西然后bam一堆新字段出现？
是的，将 click(function () 更改为 keyup 变体。您必须添加输入验证，但适用相同的原则。

【解决方案2】：

如果你想让他们调整数字而不丢失他们的第一个条目，你可以有这样的东西。

$('input[name=prior_employers]').keyup(function(){
     var how_many = parseInt($(this).val());
     if(how_many < 1 || isNaN(how_many)) { $('.employer-group').remove(); return; }
     $('.employer-group:gt('+how_many+')').remove();
     var employers = $('.employer-group');
     if (employers.length < how_many) {
       var container = $('#employer-container');
       for(i=employers.length; i<=how_many; i++) {
           container.append('<div class="employer-group"><input type="text" name="employer['+i+'][name]"/></div>');
       }
     }
});

【讨论】：