Question

我有一个选择内部表单组，使用了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(); 
});
});

Answer 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

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

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

2 个答案: