jQuery：根据用户输入重复X个div数量

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

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

---

这有意义吗？我该怎么做？除了html输入字段，我没有其他代码

我会使用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>

$（“#员工#字段#生成”）。单击（函数（）
{
$（“#雇员_字段”）.html（“”）；
var number_employees=$（“输入[name='number_employees']”）val（）；
对于（i=0；i如果您希望允许他们在不丢失第一个条目的情况下调整数字，您可以使用类似的方法

$('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>');
       }
     }
});

$（'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_Number+'））.remove（）；
var雇主=$（“雇主集团”）；
如果（雇主长度<多少）{
变量容器=$（“#雇主容器”）；
对于（i=employers.length；我有一些我们可以使用的现有代码吗？当然，这是有意义的。我不知道如何或从哪里开始。你以前用过jQuery吗？你知道JS吗？我熟悉jQuery。我以前用过很多，但不知道如何做这件事。代码可以使用一些优化，但这是不可能的这是一般的想法，是的。有没有一种方法可以在运行中做到这一点。即不使用按钮，他们单击字段，输入一个数字，然后单击其他内容，然后bam会出现一组新字段？是的，将click（函数（）更改为keyup变体。您必须添加输入验证，但同样的原则也适用。