선택한 옵션으로 select2를 복제하는 방법은 무엇입니까?

Question

jQuery로 select2를 올바르게 복제하는 방법이 궁금합니다. 문제는 클론을 사용하면 복제본이 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(); 
    }); 
}); 

내가 당신의 문제는 당신이 그것을 복제하고도 올바른 요소에 select2()을 정의되지 후 항목 ID를 변경하지 않았다고 생각.

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>