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。

e.g。

$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被破坏并在原始选择上重新初始化时没有任何问题。

Answer 2

尝试更改

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

到

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

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

2 个答案: