Как клонировать select2 с выбранной опцией?

Question

, так что мне интересно, как правильно клонировать select2 с jquery? Проблема в том, что я использую клон, он делает мой клон width 1px и не копирует выбранное значение. Я пытаюсь использовать несколько способов, клонируя истинные аргументы, клонируя событиями, но пока ничего.

Я думаю, что проблема как-то связана с методом clone().

Связанные jsfiddle: https://jsfiddle.net/qeodcg3o/

Answer 1

Это работает:

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

Если вы будете использовать статическую ширину для всех падений падения, то вы могли бы сделать что-то вроде этого, вы можете установить ширину в выпадающее поле, из которого он становится клонирован из,

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

Так автоматически все ваши клонированные спады падения будут иметь та же ширина

Answer 3

Я создал новый <li> для предстоящего элемента. Вы можете изменить, как хотите.

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> 

Удаляется onlick функцию от кнопки и использовать JQuery on функции для обнаружения клик.

сценарий:

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

Я думаю, ваша проблема в том, что вы не изменили пункт Id после клонировать его, а также не определен select2() на правый элемент.

Answer 4

Вы хотите как это?

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