Select2 不适用于动态添加的表单组

Posted 2023-05-07

【中文标题】Select2 不适用于动态添加的表单组

【英文标题】：Select2 not working for dynamically added form groups

【发布时间】：2016-06-26 02:42:54

【问题描述】：

我在表单组中有一个使用 select2 的选择。我使用了一些代码来复制表单组以制作多个表单组，但重复表单组中的选择框不起作用（不可点击）。请帮我解决这个问题。 这是我的代码：

<div class="box">
                  <div class="form-group duplicable">
                    <div class="row">
                      <div class="search-box col-xs-4">
                        <select name="Attribute" class="form-control">
                          <option value="none">Attribute</option>
                          <option>Dimension</option>
                          <option>Weight</option>
                        </select>
                      </div>
                      <div class="col-xs-7">
                        <input type="text" name="detail" class="form-control" placeholder="Detail">
                      </div>
                      <div class="col-xs-1"><a class="btn btn-danger pull-right btn-del"><i class="fa fa-minus"></i></a></div>
                      <div class="clearfix"></div>
                    </div>
                  </div>
                  <p class="text-right nomargin"><a class="btn btn-primary add-feature"><i class="fa fa-plus"></i></a></p>
</div>

这是我的 jquery：

$(".search-box select").select2();
$(document).on('click','.add-feature', function()
    $(this).parent().parent().find(".duplicable").clone().insertBefore($(this).parent()).removeClass("duplicable").find("input").val("");
    $(this).parent().parent().find(".btn-del").click(function(e) 
    $(this).parent().parent().remove(); 
);
);

【参考方案1】：

如果我正确理解您的要求，您正在尝试复制具有表单元素 (select) 和附加事件链接 (delete) 的 html 集。如果这是您正在寻找的，下面的代码将，

克隆元素 id=clone 并为副本分配一个新的 ID (clone-n) 重复的select 也分配了一个新名称 (Attribute-n) 每个删除链接都会删除相关的父项

    // add
var counter = 0;
$('.add-feature').on('click', function() 
  var editElm;
  counter ++;              // counter for cloned elements ids  
  $("#clone").clone(true)   // "true" = cloned with events
  .map(function()
      editElm = $(this)
      .attr('id','clone-'+counter)        // new clone id 
      .find('select')
      .attr('name','Attribute-'+counter)  // new select name 
      .end();      
  );
  $(this).before(editElm);                // add cloned item
);
     // delete
$('.btn-del').on('click',function(e)
  $(this).parents('.form-group').remove(); // remove cloned parent  
);

See demo

【讨论】：

感谢您的努力。但是它根本对我不起作用，因为 select2 通过在 select2 框中的许多地方创建多个克隆的 id 给我带来了问题。但我真的很感谢你的帮助。谢谢你。我还在以下位置找到了解决方案：***.com/questions/17175534/…

【参考方案2】：

这对我有用：

$(".search-box select").select2();
    $(document).on('click','.add-feature', function()
        $(this).parent().parent().find(".search-box select").select2("destroy");
        $(this).parent().parent().find(".duplicable").clone().insertBefore($(this).parent()).removeClass("duplicable").find(":not(select).form-control").val("");
        $(this).parent().parent().find(".search-box select").select2();
        $(this).parent().parent().find(".btn-del").click(function(e) 
        $(this).parent().parent().remove(); 
    );
    );