Select2 消失，添加动态形式后

Question

我有一个关于 select2 的问题，发生的事情是我有一个几乎没有 select2 的动态表单，但是每次我单击 addNewItembtn 之前的字段的 select2 功能都会消失。

这是代码：

$(document).ready(function() {
            // set dropdown to select2
            $('#warehouse_id').select2();
            $('.product_id').select2();
            $('.unit_of_measure_id').select2();
            $('.product_type_id').select2();

            $('#addProductItemBtn').click(function(e) {
                e.preventDefault();
                let productItems = $('tbody tr').length;
                let productItem = `
                    <tr>
                        <td>
                            <select name="productItems[${productItems}][product_type_id]" id="product_type_id" class="form-control product_type_id">
                                <option value="">-- Product Type --</option>
                                @foreach ($productTypes as $productType)
                                    <option value="{{ $productType->id }}"
                                        @selected(old("productItems.{$loop->index}.product_type_id"))>
                                        {{ $productType->title }}
                                    </option>
                                @endforeach
                            </select>
                        </td>
                        <td>
                            <select name="productItems[${productItems}][product_id]" id="product_id" class="form-control product_id">
                                <option value="">-- Product --</option>
                                @foreach ($products as $product)
                                    <option value="{{ $product->id }}"
                                        @selected(old("productItems.{$loop->index}.product_id"))>
                                        {{ $product->product_name }}
                                    </option>
                                @endforeach
                            </select>
                        </td>
                        <td>
                            <input type="text" name="productItems[${productItems}][serial_number]" id="serial_number" class="form-control serial_number">
                        </td>
                        <td>
                            <input type="brand" name="productItems[${productItems}][brand]" id="brand" class="form-control brand">
                        </td>
                        <td>
                            <select name="productItems[${productItems}][unit_of_measure_id]" id="unit_of_measure_id" class="form-control unit_of_measure_id">
                                <option value="">-- UOM --</option>
                            </select>
                        </td>
                        <td>
                            <input type="number" name="productItems[${productItems}][quantity]" id="quantity" class="form-control quantity" value="1">
                        </td>
                        <td>
                            <input type="number" name="productItems[${productItems}][item_cost]" id="item_cost" class="form-control item_cost" value="0.00">
                        </td>
                        <td>
                            <a href="#" class="deleteProductItemBtn">Delete</a>
                        </td>
                    </tr>
                `;
                $('tbody').append(productItem);
                $('.product_id').select2();
                $('.unit_of_measure_id').select2();
                $('.product_type_id').select2();
            });

            $(document).on('click', '.deleteProductItemBtn', function(e) {
                e.preventDefault();
                $(this).closest('tr').remove();
            });
});

加载页面后，select2 仍在工作

点击添加新项目按钮后

您可能会注意到，添加新字段后，select2 函数确实消失了。我怎样才能做到即使在添加新字段后仍保留上一页的状态。 TIA

我怎样才能做到即使在添加新字段后仍保持上一页的状态。 TIA

Answer 1

这是由于

id="product_type_id"

id="product_id"

而发生的问题。 ID 属性应该是唯一的，因此最好通过创建行来创建动态 ID，或者简单地从代码中删除 ID 属性。换句话说，你现在不需要它。

$(document).ready(function () {
    initSelect2();
    $('#addProductItemBtn').click(function (e) {
        e.preventDefault();
        let productItems = $('tbody tr').length;
        let productItem = `
                <tr>
                    <td>
                        <select name="productItems[${productItems}][product_type_id]" class="form-control product_type_id">
                            <option value="">-- Product Type --</option>
                            @foreach ($productTypes as $productType)
                                <option value="{{ $productType->id }}"
                                    @selected(old("productItems.{$loop->index}.product_type_id"))>
                                    {{ $productType->title }}
                                </option>
                            @endforeach
                        </select>
                    </td>
                    <td>
                        <select name="productItems[${productItems}][product_id]" class="form-control product_id">
                            <option value="">-- Product --</option>
                            @foreach ($products as $product)
                                <option value="{{ $product->id }}"
                                    @selected(old("productItems.{$loop->index}.product_id"))>
                                    {{ $product->product_name }}
                                </option>
                            @endforeach
                        </select>
                    </td>
                    <td>
                        <input type="text" name="productItems[${productItems}][serial_number]" id="serial_number" class="form-control serial_number">
                    </td>
                    <td>
                        <input type="brand" name="productItems[${productItems}][brand]" id="brand" class="form-control brand">
                    </td>
                    <td>
                        <select name="productItems[${productItems}][unit_of_measure_id]" class="form-control unit_of_measure_id">
                            <option value="">-- UOM --</option>
                        </select>
                    </td>
                    <td>
                        <input type="number" name="productItems[${productItems}][quantity]" id="quantity" class="form-control quantity" value="1">
                    </td>
                    <td>
                        <input type="number" name="productItems[${productItems}][item_cost]" id="item_cost" class="form-control item_cost" value="0.00">
                    </td>
                    <td>
                        <a href="#" class="deleteProductItemBtn">Delete</a>
                    </td>
                </tr>
            `;
        $('tbody').append(productItem);

        initSelect2();
    });

    $(document).on('click', '.deleteProductItemBtn', function (e) {
        e.preventDefault();
        $(this).closest('tr').remove();
    });

    function initSelect2() {
        $('#warehouse_id').select2();
        $('.product_id').select2();
        $('.unit_of_measure_id').select2();
        $('.product_type_id').select2();
    }
});

<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/select2.min.js"></script>

<button id="addProductItemBtn">Add Item</button>
<table>
    <tbody></tbody>
</table>