如何使用选定的选项克隆 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();
    });
});

我认为您的问题是您在克隆后没有更改项目 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>

如何使用选定的选项克隆 select2？

How to clone select2 with selected option?

javascript

jquery

select2