如何使用選定選項克隆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()向右元素後沒有更改的項目標識。

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>