父子类别不只保存类别

Question

我有一个类别、父类别和子类别。当我选择一个类别时，我保存它，但是当我在图像中选择父项或子项时，该类别会保存类别所有者并将其全部收集在框1中。他在选择父项或子项时选择全部，所以我想要仅选择 1 个，而不是全部。

检查图像（https://i.ibb.co/1LmpbvW/error-category.jpg）

刀片

<div class="form-group col-md-3">
    <label>@lang('Categories')</label>
    <select class="select2-multi-select form-control" name="categories[]" id="categories" multiple required">
        @foreach ($categories as $category)
            <option value="{{ $category->id }}">@lang($category->name)</option>
            @php
                $prefix = '--';
            @endphp
            @foreach ($category->allSubcategories as $subcategory)
                <option value="{{ $subcategory->id }}">
                    {{ $prefix }}@lang($subcategory->name)
                </option>
                @include('admin.partials.subcategories', [
                    'subcategory' => $subcategory,
                    'prefix' => $prefix,
                ])
            @endforeach
        @endforeach
    </select>
</div>

<script>
    'use strict';
    (function($){

        var dropdownParent = $('.has-select2');

        $('select[name="category_id"]').on('change', function () {
            var subcategories = $(this).find(':selected').data('subcats');
            var output= `<div class="col-md-2">
                            <label class="font-weight-bold">Subcategory</label>
                        </div>
                        <div class="col-md-10">
                            <select class="form-control select2-basic" name="sub_category_id">
                            <option value="" selected disabled>@lang('Select One')</option>
                        </div>
                        `;
            if (subcategories.length != 0) {
                $.each(subcategories, function (key, val) {
                    output += `<option value="${val.id}">${val.name}</option>`;
                });
                output += `</select>`
                $('#sub-categories-div').html(output);
            }
        });

        @if (request() -> routeIs('admin.products.edit'))

            var categories = [];
            @if($product->categories)
                categories = @json($product->categories->pluck('id'));
            @endif
            $('#categories').val(categories);

            $('.select2-multi-select').select2({
                dropdownParent: dropdownParent,
                closeOnSelect: false
            });

        @endif


    })(jQuery)

</script>

型号分类

namespace App\Models;

use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\SoftDeletes;

class Category extends Model
{
    use SoftDeletes;
    protected $guarded  = ['id'];

    public function subcategories()
    {
        return $this->hasMany(Category::class, 'parent_id')->orderBy('name');
    }

    public function allSubcategories()
    {
        return $this->subcategories()->with('allSubcategories');
    }


    public function products()
    {
        return $this->belongsToMany(Product::class, 'products_categories', 'category_id', 'product_id');
    }
}

控制器

public function editProduct($id)
{
    $data['product'] = Product::whereId($id)->first();
    $data['categories'] = Category::with('allSubcategories')->where('parent_id', null)->get();
    $data['pageTitle'] = "Edit Product";
    
    return $data;
}

Answer 1

在 Blade 文件中，类别选择框称为

categories[]

。确保事件处理程序对应于正确的选择元素。

将事件处理程序更新为：

$('select[name="categories[]"]').on('change', function () {...}