jquery - 将 select2 应用于克隆节点中的元素？

Question

全部，

我有一个 PHP 模板文件，它生成一个带有 3 个选择字段的隐藏 div。

<div>
    <div class="form-group accessory collapse">
        <select class="accessory" style="width:50%">
        </select>

        <span class="input-group-addon">×</span>

        <select class="accessoryQuantity" style="width:10%">
        </select>

        <select class="accessoryType">
        </select>
    </div>

使用 jQuery 克隆这些节点，如下所示:

$newItem = $('.form-group.accessory.collapse').clone();
$newItem.removeClass('collapse');

然后我尝试像这样将 select2 应用于克隆的 jQuery 对象，但它只会弄乱整个克隆的节点。

$newItem.select2();

如何将 select2 应用于克隆节点？

注意:我尝试将 select2 应用于隐藏的选择，但是当您克隆它时，它会弄乱 select2 下拉列表。

Answer 1

我过去也遇到过同样的问题，我发现解决该问题的最佳方法是在克隆原始元素之前销毁原始元素上的 select2，然后在原始元素和克隆元素上重新初始化 select2。

例如

$original.select2('destroy');
var $clone = $original.clone();

// add the clone to the DOM, e.g.
$clone.insertAfter($original);

$original.select2({options});
$clone.select2({options});

整个过程非常快，所以我在看到 select2 被破坏并在原始 select 上重新初始化时没有遇到任何问题。