選択したオプションでselect2をクローンする方法は？

Question

jqueryでselect2を正しくクローンする方法が分かりますか？問題はクローンを使用するとクローンがwidth 1pxになり、選択した値がコピーされません。私は真の議論でクローンを作成し、イベントでクローンを作成していますが、これまで何もしていません。

どういうわけかclone()方法に関連すると思います。

関連jsfiddleは： ​​

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>