Cloning select2 options

Question

I am trying to clone a select2 with it's options but it doesn't seem to work.

I tried to destroy before recreating, to remove the span before recreating, but nothing works. Here is the basic code.

HTML :

<div class="container">
  <div class="row" id="row_0">
    <div class="col-md-12">
      <form id="form_0" onsubmit="return false;">
        <select class="select2" name="test1" id="test1_0">
          <option value="o_test">o_test1_1</option>
          <option value="o_test">o_test1_2</option>
          <option value="o_test">o_test1_3</option>
        </select>
        <select class="select2" name="test2" id="test2_0">
          <option value="o_test">o_test2_1</option>
          <option value="o_test">o_test2_2</option>
          <option value="o_test">o_test2_3</option>
        </select>

        <button onclick="addRow()">clone</button>
      </form>
    </div>
  </div>
</div>

Javascript :

function addRow() {
  var div = $('div[id^="row"]:last');
  var num = parseInt( div.prop("id").match(/\d+/g), 10 ) +1;
  var clone = div.clone().prop('id', 'row_'+num );

  div.after( clone );
}

$(".select2").select2();

Here is a fiddle containing my problem : https://jsfiddle.net/L5mn63g7/25/

So any idea what could the problem be? To be able to clone select2 WITH it's options.

Possible duplicate of [Cloned Select2 is not responding](https://stackoverflow.com/questions/17175534/cloned-select2-is-not-responding) — Sven Hakvoort, Nov 23 '18 at 10:02
@SvenHakvoort there are many topics that are talking about this problem, but each is different and none actually proposes a fix to my problem, if you think the link resolves my problem feel free to show me how as I wasn't able to =) But thank you for your comment. — , Nov 23 '18 at 10:11

score 1 · Accepted Answer · answered Nov 23 '18 at 12:02

Remove span tags before cloning and rebind select2 to the cloned dropdowns.

Hope it will help you.

function addRow() {
  var div = $('div[id^="row"]:last');
  var num = parseInt( div.prop("id").match(/\d+/g), 10 ) +1;
  var clone = div.clone().prop('id', 'row_'+num );
  clone.find('[id]').each(function(){var $this = $(this); $this.prop('id', $this.prop('id').split('_')[0] + '_' + num);});
  clone.find("span").remove();
 clone.find(".select2").select2();
  clone.find(".select2-container").css("width","300px")
  div.append( clone );
  
}

$(".select2").select2();

select {
  width: 300px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/css/select2.min.css" rel="stylesheet" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.3/js/select2.min.js"></script>
<div class="container">
  <div class="row" id="row_0">
    <div class="col-md-12">
      <form id="form_0" onsubmit="return false;">
        <select class="select2" name="test1" id="test1_0">
          <option value="o_test">o_test1_1</option>
          <option value="o_test">o_test1_2</option>
          <option value="o_test">o_test1_3</option>
        </select>
        <select class="select2" name="test2" id="test2_0">
          <option value="o_test">o_test2_1</option>
          <option value="o_test">o_test2_2</option>
          <option value="o_test">o_test2_3</option>
        </select>

        <button onclick="addRow()">clone</button>
      </form>
    </div>
  </div>
</div>

score 0 · Answer 2 · edited Nov 23 '18 at 12:36

You have to destroy select2 first before cloning and change the name of selector for select2 to something other. Here is working solution

function addRow() {
  $('.items').select2("destroy");
  var div = $('div[id^="row"]:last');
  var num = parseInt(div.prop("id").match(/\d+/g), 10) + 1;
  var $clone = div.clone().prop('id', 'row_' + num);
  $clone.find('[id]').each(function() {
    var $this = $(this);
    $this.prop('id', $this.prop('id').split('_')[0] + '_' + num);
  });

  div.after($clone);
  $('.items').select2();
}

$(".items").select2();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.5/js/select2.js"></script>

<div class="container">
  <div class="row" id="row_0">
    <div class="col-md-12">
      <form id="form_0" onsubmit="return false;">
        <select class="items" name="test1" id="test1_0">
          <option value="o_test">o_test1_1</option>
          <option value="o_test">o_test1_2</option>
          <option value="o_test">o_test1_3</option>
        </select>
        <select class="items" name="test2" id="test2_0">
          <option value="o_test">o_test2_1</option>
          <option value="o_test">o_test2_2</option>
          <option value="o_test">o_test2_3</option>
        </select>

        <button onclick="addRow()">clone</button>
      </form>
    </div>
  </div>
</div>

Cloning select2 options

2 Answers2