Laravel и select2 проблемы - PullRequest
Новая
       15

Laravel и select2 проблемы

0 голосов
/ 03 июля 2019

У меня есть небольшой скрипт Laravel (грубые заказы), я использую select2 в качестве поиска в списке товаров, но здесь есть небольшая проблема. Нажатие «Добавить товар» создаст новый узел для добавления нового товара . Это должно выглядеть так, но что-то не так с моим вновь созданным узлом , это выглядит так: Недавно добавленный узел .

Ниже приведен мой скрипткоторый добавляет узел. 

<script>
    $('#add-product').click(function () {
        let element = $(
            '            <div class="row new-product">\n' +
            '                <div class="col-xs-12 col-md-4 form-group">\n' +
            '                    <div class="label-mb"><label for="product">Product</label></div>\n' +
            '                    <select class="form-control kt-select2 products" id="kt_select2_2" name="products[]">\n' +
            '                       <option selected disabled>Select a product</option>' +
            '                           {!!$options!!}\n' +
            '                    </select>' +
            '                </div>\n' +
            '                <div class="col-xs-12 col-md-4 form-group">\n' +
            '                    <div class="label-mb"><label class="order-label">Product Code</label></div>\n' +
            '                    <input type="text" class="form-control" id="product_code" name="product_code[]" placeholder="Enter product code" value="{{ old('product_code') }}"/>\n' +
            '                </div>\n' +
            '                <div class="col-xs-12 col-md-4 form-group">\n' +
            '                    <div class="label-mb"><label class="order-label">Product Quantity</label></div>\n' +
            '                    <input type="number" class="form-control" id="quantity" name="quantity[]" placeholder="Enter product quantity" value="{{ old('quantity') }}" />\n' +
            '                </div>\n' +
            '                <div class="col-xs-12 col-md-4 form-group">\n' +
            '                    <div class="label-mb"><label class="order-label">Product Price</label></div>\n' +
            '                    <input type="text" class="form-control" id="price" name="price[]" placeholder="Enter product price" value="{{ old('price') }}" />\n' +
            '                </div>\n' +
            '                <div class="col-xs-12 col-md-4 form-group">\n' +
            '                    <div class="label-mb"><label class="order-label">Discount</label></div>\n' +
            '<div class="input-group">\n' +
            '<div class="input-group-prepend"><span class="input-group-text"><i class="fal fa-percentage"></i></span></div>\n' +
            '<input type="text" id="discount" name="discount[]" class="form-control" placeholder="Enter product discount">\n' +
            '</div>\n' +
            '                       </div>\n' +
            '<div class="col-lg-4">\n' +
            '<div class="form-group">\n' +
            '<label for="actions">Actions</label>\n' +
            '<div class="input-group actions d-flex">\n' +
            '<span class="delete-product"><i class="fal fa-trash"></i> Delete</span>\n' +
            '</div>\n' +
            '</div>\n' +
            '</div>\n' +
            '                </div>\n' +
            '</div>');
        $('.last').before(element);

    });
</script>

Просмотр 

<div class="row last new-product">
    <div class="col-lg-4">
        <label for="product">Product</label>
        @if($products)
            <select class="form-control kt-select2 products" id="kt_select2_2" name="products[]">
                <option selected disabled>Select a product</option>
                @foreach($products as $product)
                    <option value="{{ $product->id }}" data-price="{{ $product->selling_price }}">{{ $product->name }}</option>
                @endforeach
            </select>
        @endif
    </div>

    <div class="col-lg-4">
        <div class="form-group">
            <label for="product_code">Product Code</label>
            <input type="text" class="form-control" id="product_code" name="product_code[]" placeholder="Enter product code" value="{{ old('product_code') }}">
        </div>
    </div>

    <div class="col-lg-4">
        <div class="form-group">
            <label for="quantity">Product Quantity</label>
            <input type="number" class="form-control" id="quantity" name="quantity[]" placeholder="Enter product quantity" value="{{ old('quantity') }}">
        </div>
    </div>

    <div class="col-lg-4">
        <div class="form-group">
            <label for="price">Product Price</label>
            <input type="text" class="form-control" id="price" name="price[]" placeholder="Enter product price" value="{{ old('price') }}">
        </div>
    </div>

    <div class="col-lg-4">
        <div class="form-group">
            <label for="discount">Product Discount</label>
            <div class="input-group">
                <div class="input-group-prepend"><span class="input-group-text"><i class="fal fa-percentage"></i></span></div>
                <input type="text" id="discount" name="discount[]" class="form-control" placeholder="Enter product discount">
            </div>
        </div>
    </div>

    <div class="col-lg-4">
        <div class="form-group">
            <label for="actions">Actions</label>
            <div class="input-group actions d-flex">
                <span id="add-product"><i class="fal fa-plus"></i> Add product</span>
            </div>
        </div>
    </div>
</div>

1 Ответ

0 голосов
/ 03 июля 2019

Сначала вам нужно destroy all выбрать 2, затем recreate.

Пожалуйста, добавьте этот код в вашу функцию щелчка 

$(".kt-select2").select2('destroy'); 

$('.kt-select2').select2();

нажмите здесь для справки

...