单击时克隆的 select2 没有响应

Question

所以我克隆了我的 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>

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

Answer 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