Select2 not working for dynamically added form groups

Question

i have a select inside form group with select2 used. I used some code to duplicate the form group for making multiple form groups but the select box in duplicated form group is not working(is not clickable). Please help me to fix this.
Here is my code:

<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>

And here is my 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(); 
});
});

score 2 · Answer 1 · answered Mar 12 '16 at 00:58

This worked for me:

$(".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(); 
    });
    });

CreativeCreate · Answer 2 · 2016-03-11T09:40:11.990

If I understand your requirements correctly, you are trying to duplicate html set that has form elements (select) and a event attached link(delete). If this is what you are looking for, following code will,

Clone element id=clone and assigned a new id to the duplicate (clone-n)
Duplicated select also assigned a new name (Attribute-n)
Each delete link will remove the relevant parent

    // 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

Thankyou for your great effort. However it didnot worked for me at all because the select2 was giving me problem by creating multiple cloned id inside many places in select2 box. But i really appreciate your help. Thank you. I also found the solution at: http://stackoverflow.com/questions/17175534/clonned-select2-is-not-responding — Sushil Thapa, Mar 12 '16 at 00:53

Select2 not working for dynamically added form groups

2 Answers2