克隆的Select2没有响应

Question

我正在尝试克隆包含select2工具的行,当我使用jQuery克隆该行时,克隆的select2没有响应.在下面给出的图像中,首先是原始的select2正常工作但第二和第三个select2克隆没有响应

代码段:

$(document).ready(function() {
  var clonedRow = $('.parentRow').clone().html();
  var appendRow = '<tr class = "parentRow">' + clonedRow + '</tr>';
  $('#addRow').click(function() {
    $('#test').after(appendRow);
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<tr class="parentRow" id="test">
  <td>
    <g:message code="educationDetails.educationLevel.label" default="Education Level" />
  </td>
  <td>
    <div style="float: left;">
      <g:select name="degree.id" from="${EducationalDegree.list()}" optionKey="id" optionValue="title" noSelection="['': '']" id="degree" value="${cvEducationDetailCO?.degree?.id}" onchange="changeGradeSelectData(this.value)" />
    </div>
    <div>
      <a href="javascript:void(0)" id="addRow">
        <img alt="" title="Add Additional Education Level" src="/static/images
                                                                /top_submit_1.gif">
      </a>
    </div>
  </td>
</tr>

Answer 1

在克隆行之前,需要通过调用其destroy方法来禁用select元素上的Select2 :

破坏

恢复由Select2完成的DOM更改.通过Select2完成的任何选择都将被保留.

见http://ivaynberg.github.io/select2/index.html

克隆行并将其克隆插入DOM后,需要在两个select元素(原始元素和新克隆元素)上启用select2.

这是一个JSFiddle,展示了它是如何完成的:http://jsfiddle.net/ZzgTG/

小提琴的代码

HTML

<div id="contents">
    <select id="sel" data-placeholder="-Select education level-">
        <option></option>
        <option value="a">High School</option>
        <option value="b">Bachelor</option>
        <option value="c">Master's</option>
        <option value="c">Doctorate</option>
    </select>
</div>
<br>
<button id="add">add a dropdown</button>

CSS

#contents div.select2-container {
    margin: 10px;
    display: block;
    max-width: 60%;
}

jQuery的

$(document).ready(function () {
    $("#contents").children("select").select2();
    $("#add").click(function () {
        $("#contents")
            .children("select")
            // call destroy to revert the changes made by Select2
            .select2("destroy")
            .end()
            .append(
                // clone the row and insert it in the DOM
                $("#contents")
                .children("select")
                .first()
                .clone()
        );
        // enable Select2 on the select elements
        $("#contents").children("select").select2();
    });
});

Answer 2

I faced the same problem, while trying to add a row to a table dynamically. (the row contains more than one select2 instance.)

I solved it in this way:

function addrow()
{
    var row = $("#table1 tr:last");

    row.find(".select2").each(function(index)
    {
        $(this).select2('destroy');
    }); 

    var newrow = row.clone();       

    $("#table1").append(newrow);

    $("select.select2").select2();
}

The trick was that you need to destroy all the instances of .select2 separately and before cloning the row. And then after cloning, re-initialize the .select2. I hope this will work for others as well.

Answer 3

你必须在克隆之前首先销毁select2,但.select2('destroy')不起作用.用这个:

$myClone = $("section.origen").clone();

$myClone.find("span").remove();
$myClone.find("select").select2();

$("div").append($myClone);

Answer 4

我实际上已经创建了帐户来回答这个问题，因为我花了一段时间才让它工作。

这在克隆前使用时不起作用： $('.selectpicker').select2('destroy')

但这在我的情况下有效：

$('.selectpicker').select2('destroy');
$('.selectpicker')
    .removeAttr('data-live-search')
    .removeAttr('data-select2-id')
    .removeAttr('aria-hidden')
    .removeAttr('tabindex');

只需删除 select2 添加的所有附加属性。

编辑 #1

好的，似乎您还必须从正在克隆的元素中删除 ID，因为 select2 在选择上找不到任何内容时尝试添加它自己的唯一 ID，但是当您确实有选择时，它会变得混乱，而 selet2 仅附加在最后一个具有相同 ID 的元素。