克隆的Select2没有响应 [英] Cloned Select2 is not responding

问题描述

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

I am trying to clone a row which contains select2 tool ,when i clone that row using jQuery the cloned select2 is not responding.In image given below first select2 which is original is working fine but 2nd and 3rd select2 which are cloned not responding

代码段：

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

推荐答案

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

Before you clone the row, you need to disable Select2 on the select element by calling its destroy method:

销毁

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

Reverts changes to DOM done by Select2. Any selection done via Select2 will be preserved.

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

克隆行后将其克隆插入DOM中，您需要在两个select元素（原始元素和新克隆元素）上启用select2。

After you clone the row and insert its clone in the DOM, you need to enable select2 on both select elements (the original one and the new cloned one).

这是一个JSFiddle，它展示了它如何能够完成： http://jsfiddle.net/ZzgTG/

Here's a JSFiddle that shows how it can be done: 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();
    });
});

这篇关于克隆的Select2没有响应的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！