如何使用選定選項克隆select2？

所以我想知道如何正確克隆jQuery的select2？問題是當我使用克隆時，它使我的克隆的width 1px，它不復制選定的值。我嘗試了多種方式，克隆真實的參數，克隆事件，但目前爲止還沒有。如何使用選定選項克隆select2？

我認爲問題與clone()方法有某種關係。

相關的jsfiddle：

2016-11-18 Disciples

你想爲每個下拉菜單設置特定的寬度？ – GraveyardQueen

沒有。只需將其克隆並在「添加國家/地區」跨度按鈕後插入即可。 – Disciples

這工作：

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

來源

2016-11-18 08:08:54 Joe

完美地工作！但是在我的例子中，寬度是多少？你能否詳細說明一下？ – Disciples

如果你會使用固定寬度，所有的下拉菜單，那麼你可以做這樣的事情，你可以設置寬度從下拉框中得到克隆，

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

因此，所有你克隆的下拉菜單將有相同的寬度

來源

2016-11-18 08:09:47 GraveyardQueen

我爲即將到來的元素創建了一個新的<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()向右元素後沒有更改的項目標識。

來源

2016-11-18 08:10:58 Qsprec

你想要這樣嗎？

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

來源

2016-11-18 08:18:48 vel

如何使用選定選項克隆select2？

回答

相關問題