How to clone select2 with selected option?

Question

so I wonder how to properly clone select2 with jquery? Problem is when I use clone, it makes my clone's width 1px and it doesn't copy selected value. I tries multiple ways, cloning with true-arguments, cloning with events, but nothing so far.

I think problem is somehow related to clone() method.

Related jsfiddle: https://jsfiddle.net/qeodcg3o/

Answer 1

I created a new <li> for the upcoming element. You can change however you want.

html:

<li>
    <select id="ws_language" name="language">
        <option value="1">English</option>
        <option value="2">Abkhazian</option>
        <option value="3">Afar</option>
        <option value="4">Afrikaans</option>
        <option value="5">Akan</option>
        <option value="6">Albanian</option>
        <option value="7">Amharic</option>
        <option value="8">Arabic</option>
    </select>
</li>
<li id='ws_add_country' style="text-align: center;">
    <span id="add_country" style="cursor: pointer;color: #21277c;border: 2px;border-bottom: dashed 1px #21277C;">
        Add another country
    </span>
</li>
<li id="newLi">

</li>

Deleted onlick function from button and used jquery on function to detect click.

script:

$(document).ready(function () {
    var count = 0;
    $('#ws_language').select2();
    $('#add_country').on('click', function () {
        count++;
        var sel = $('#ws_language');
        var clone = sel.clone();
        clone.attr('id', 'newId'+count);
        clone.select2();
        clone.insertAfter('#ws_add_country').wrap('<li></li>').select2();
    });
});

I think your problem was that you didn't change the item Id after you clone it and also not defined the select2() to the right element.

Answer 2

This works:

<li style="display:none">
  <select id="ws_language_template" name="language">
    <option value="1">English</option>
    <option value="2">Abkhazian</option>
    <option value="3">Afar</option>
    <option value="4">Afrikaans</option>
    <option value="5">Akan</option>
    <option value="6">Albanian</option>
    <option value="7">Amharic</option>
    <option value="8">Arabic</option>
  </select>
</li>

<li id='ws_add_country' style="text-align: center;">
  <script>
    var i = 0;
  $(document).ready(function(){
    addCountry();
  })
    function addCountry(){
      var sel = $('#ws_language_template');//.insertAfter('#ws_add_country').wrap('<li class="yes"></li>').select2().css('width','20%');
      var clone = sel.clone(true, true);
      i ++;
      clone.attr("id", "ws_language"+i);
      clone.show();
      clone.insertAfter('#ws_add_country').wrap('<li></li>').select2();
    }
  </script>

  <span onclick='addCountry()' id="add_country" style="cursor: pointer;color: #21277c;border: 2px;border-bottom: dashed 1px #21277C;" >
    Add another country
  </span>

</li>

Answer 3

If you would be using a static width for all the drop downs then you could do something like this,you could set the width in the drop down box from which it is getting cloned from,

<select id="ws_language" name="language" style="width:200px">

So automatically all your cloned drop downs would have the same width

Answer 4

Do you want like this?

        <li class="test">
          <select id="ws_language" name="language">
            <option value="1">English</option>
            <option value="2">Abkhazian</option>
            <option value="3">Afar</option>
            <option value="4">Afrikaans</option>
            <option value="5">Akan</option>
            <option value="6">Albanian</option>
            <option value="7">Amharic</option>
            <option value="8">Arabic</option>
          </select>
        </li>
        <li id='ws_add_country' style="text-align: center;">
          <script>
            $(document).ready(function(){
            $('.#ws_language').select2();
          })
            function addCountry(){
              var sel = $('.test #ws_language');//.insertAfter('#ws_add_country').wrap('<li class="yes"></li>').select2().css('width','20%');
              var clone = sel.clone(true, true);
              clone.insertAfter('#ws_add_country').wrap('<li></li>').select2();
            }
          </script>
          <span onclick='addCountry()' id="add_country" style="cursor: pointer;color: #21277c;border: 2px;border-bottom: dashed 1px #21277C;" >
            Add another country
          </span>
        </li>