单击时克隆的 select2 没有响应

Posted 2023-05-07

【中文标题】单击时克隆的 select2 没有响应

【英文标题】：Cloned select2 is not responding when I click

【发布时间】：2021-12-02 00:24:45

【问题描述】：

所以我克隆了我的 select2 表单，原来的 select2 表单工作正常。但是，对于克隆的不起作用，当我单击它时它没有响应。

我的代码

<div class="card-body" id="wrapper-form">
    <div class="mb-1">
        <button class="btn btn-success" type="submit">Add</button>
        <input class="btn btn-info" type="button" id="clone" value="New Item" />
    </div>
    <div class="form-row" id="form-clone">
        <div class="form-group col">
            <select id="master_item_id" name="master_item_id"
                class="form-control">
                <option></option>
            </select>
        </div>
        <div class="form-group col-3">
            <input name="quantity" id="quantity" type="text"
                class="form-control @error('quantity') placeholder="Quantity">
        </div>
    </div>
</div>

<script>
    $("#clone").click(function() 
        $("#form-clone").clone().appendTo("#wrapper-form");
    );
</script>
<script src=" asset('select2-bootstrap4/dist/js/select2.min.js') "></script>
<script>
    $(function () 
        $('select').each(function () 
            $(this).select2(
                theme: 'bootstrap4',
                placeholder: "Item",
                allowClear: true,
            );
        );
    );
</script>

我试过了，但是当我点击按钮时它根本没有克隆。

<script>
    $(document).ready(function () 
    $("#form-clone").children("select").select2();
    $("#clone").click(function () 
        $("#form-clone")
            .children("select")
            .select2("destroy")
            .end()
            .append(
                $("#form-clone")
                .children("select")
                .first()
                .clone()
        );
        $("#form-clone").children("select").select2();
    );
);
</script>
<script src=" asset('select2-bootstrap4/dist/js/select2.min.js') "></script>
<script>
    $(function () 
        $('select').each(function () 
            $(this).select2(
                theme: 'bootstrap4',
                placeholder: "Item",
                allowClear: true,
            );
        );
    );
</script>

我在上面的代码中有什么遗漏吗？还是有更好的方法来解决这个问题？谢谢！

【参考方案1】：

这是因为你克隆后没有调用select2函数，所以试试这个：

$("#clone").click(function() 
  let el = $("#form-clone").clone();
  el.appendTo("#wrapper-form");
  $(el)
   .find('select')
   .select2(
     theme: 'bootstrap4',
     placeholder: "Item",
     allowClear: true,
    );
);

此外，您需要从 select 标记中删除 id 和 name，因为一个表单不能有多个唯一 id

【讨论】：

它克隆了 select2 但第一个克隆克隆了两个选择。对于第一个/原始 select2 在我克隆时不再使用 select2。

您是否从选择标签中删除了 id 和名称