jquery - 使用 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.
  }
}

正在克隆的对象类似于 <fieldset id="item_dup_1"><input><input><input></fieldset> 。我认为没有必要也显示完整的代码。

这对于第一次更改来说就像一个魅力，但是如果用户再次更改该值，那就会出现问题，并且不会显示正确的字段集数量，而是显示更多。看起来它正在从头开始计算所需的字段集数量，而忽略了字段集已经添加的事实，这就是我的问题实际上是什么。我还有一个函数(此处未显示，只是为了使问题清晰且尽可能简短)，该函数将新的 ID 分配给克隆的字段集，以防止重复的 ID，并且可以顺利运行。

我确信我做错了什么，但是我已经用头撞墙两天了，试图找到它是什么，但没有任何运气，所以，任何帮助将不胜感激!

提前致谢!

Answer 1

我不喜欢 Nate B 的解决方案。

• 它需要一个额外的容器元素
• 重新创建所有内容，从而丢失已输入的数据
• 造成维护问题:字段集的 html 标记重复(一次在 HTML 中，一次作为追加字符串)
• 为字段集创建无效 ID(ID 不能以数字开头)

这符合您的要求，并且与您所做的类似。仅保留原始元素的数据属性中的 id(而不是保留可能使用大量内存的整个克隆对象)。保留所有已输入的值。如果您从例如更改，则不会重新创建所有内容3 到 5。而是仅生成两个新的字段集。按照创建时的相反顺序删除它们。

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);
    });
});