Question

所以我想知道如何用jquery正确克隆select2？问题是当我使用克隆时，它使我的克隆width 1px并且它不复制选定的值。我尝试了多种方法，使用真实参数进行克隆，使用事件进行克隆，但到目前为止还没有。

我认为问题与clone()方法有某种关系。

相关的jsfiddle： https://jsfiddle.net/qeodcg3o/

Answer 1

我为即将推出的元素创建了一个新的MainController。你可以随意改变。

HTML：

<li>

从按钮中删除了<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>函数，并使用了jquery onlick函数来检测点击。

脚本：

on

我认为您的问题是您在克隆项目后没有更改项目ID，也没有将$(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(); }); });定义为正确的元素。

Answer 2

这有效：

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

如果你要为所有下拉列表使用静态宽度，那么你可以做这样的事情，你可以在下拉框中设置宽度，从中克隆它，

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

因此，所有克隆的下拉列表将自动具有相同的宽度

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？

4 个答案: