使用jQuery根据下拉框的值动态添加表单字段（或字段集）

Question

正如标题所说，我想要做的是让jQuery根据在下拉列表中选择的值添加一些额外的字段集，下框。例如，当页面加载时，下拉列表的默认值为1，并显示默认字段集。现在，如果用户在该下拉列表中选择了不同的值，则应该通过克隆来相应地调整字段集的数量（我想这应该是最好的解决方案）。这是我到目前为止有：

下拉框代码...

<select id="itemCount" name="itemCount"> 
<option value="1">1 item</option> 
<option value="2">2 items</option> 
<option value="3">3 items</option> 
<option value="4">4 items</option> 
<option value="5">5 items</option> 
<option value="6">6 items</option> 
</select> 

... jQuery的变化听者...

$(document).ready(function() { 
$("#itemCount").change(function(){ 
    var itemCountVal = jQuery(this).val(); 
    $("#item_dup_1").fieldsManage(itemCountVal); 
}); 
}); 

...和功能本身（它实际上是基于我以为是什么，我需要一个良好的起点，一个jQuery插件）：

jQuery.fn.fieldsManage = function (number) { 
    var clone, 
    objTemplate = source.clone(true), 
    source = jQuery(this), 
    maxClones = number - 1, 
    clones = []; 

    if (clones.length < maxClones) { 
    while (clones.length < maxClones) { 
     clone = objTemplate.clone(true).insertAfter(clones[clones.length - 1] || source); 
     clones.push(clone); 
    } 
    } 

    if (clones.length > maxClones) { 
    // Fieldsets removal function goes here. 
    } 
} 

的对象是作c像是<fieldset id="item_dup_1"><input><input><input></fieldset>。我不认为有必要展示完整的代码。

这对于第一次更改很有用，但如果用户再次更改该值，那就是出现问题时，而不是显示正确数量的字段集，它会显示更多信息。它看起来像是从头开始计算所需的字段集的数量，而忽略了字段集已被添加的事实，而这正是我的问题所在。我还有一个函数（这里没有显示只是为了保持问题清晰和尽可能简短），将新的ID分配给克隆的字段集以防止重复的ID并且无障碍地工作。

我相信我做错了什么，但是我一直在用这种方式撞我的头撞墙了两天，试图找到没有任何运气的东西，所以任何帮助都会超过赞赏！

在此先感谢！

Answer 1

我不喜欢内特B的解决方案

• 它需要一个额外的容器元素
• 重现一切，从而丢失数据已经进入
• 创建一个维护问题：的HTML标记fieldset被复制（一次在HTML中，一次作为追加字符串）
• 为字段集创建无效的id（id不能以数字开头）

这是做你想做的，和你所做的相似。只保留原始元素上的数据属性中的id（而不是保留可能使用大量内存的整个克隆对象）。保持已输入的所有值。如果您更改了所有内容，则不会重新创建。而是只产生两个新的字段集。以相反的顺序将它们移除。

jQuery.fn.fieldsManage = function (number) { 
    var ele = $(this); 
    var clones = ele.data("clones"); 
    clones = clones ? clones : new Array(ele.attr("id")); 
    if (clones.length < number) { 
     var clone; 
     while(clones.length < number) { 
      clone = ele.clone(true); 
      var id = clones[0]+clones.length; 
      clone.attr("id", id); 
      $("#"+clones[clones.length-1]).after(clone); 
      clones.push(id); 
     } 
    } else { 
     while(clones.length > number) { 
      $("#"+clones.pop()).remove(); 
     } 
    } 
    ele.data("clones", clones); 
} 

$(document).ready(function() { 
    $("#itemCount").change(function() { 
     $("#item_dup_1").fieldsManage(this.value); 
    }); 
}); 

Answer 2

你为什么要克隆而不是仅仅做这样的事情（和你当前的事件监听器一起）？

$(".divWhereTheseGo").empty(); 
var count = 0; 
while (count < maxItems) { 
    $(".divWhereTheseGo").append("<fieldset id=\"" + count + "\">your form info</fieldset>"); 
    count++; 
} 

字段集中的count是您如何处理唯一ID问题。