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