Laravel 7 依赖下拉菜单 3 级

Question

我有 3 个基于另一个的下拉列表：类别、产品、尺寸 当我选择一个类别时，产品会显示出来，但问题是当我选择一个产品尺寸时没有显示

我有 3 个数据库（类别、产品、尺寸）， 这应该在我创建发票时显示

发票控制器

    public function create()
    
        {
         $categories = DB::table('categories')->pluck("categorie_name","id");
         return view('invoices.add_invoices',compact('categories'));
    }

public function getProducts($id)
    {
        $products = DB::table("products")->where("categorie_id", $id)->pluck("name", "id");
        return json_encode($products);
    }
    public function getDesignation($id)
    {
        $sizes = DB::table("sizes")->where("product_id", $id)->pluck("designation", "id");
        return json_encode($sizes);
    }

路线

Route::get('/getProducts/{id}', 'InvoicesController@getProducts');
Route::get('/getDesignation/{id}', 'InvoicesController@getDesignation');

刀片

 <td>

                                                <select id="categorie" name="categorie" class="form-control select2">
                                                    <option label="Choisir">
                                                    </option>

                                                  
                                                    @foreach ($categories as $key => $value)
                                                    <option value="{{ $key }}">{{ $value }}</option>
                                                @endforeach


                                                </select>
                                            </td>
                                            <td>

                                                <select id="product" name="product" class="form-control select2">

                                                    <option label="Choisir"> </option>
                                                </select>
                                            </td>
                                            <td>

                                                <select id="designation" name="designation" class="form-control select2">
                                                    <option label="Choisir"> </option>

                                                </select>
                                            </td>

脚本

<script type="text/javascript">
    jQuery(document).ready(function() {
                jQuery('select[name="categorie"]').on('change', function() {
                    var categorieID = jQuery(this).val();
                    if (categorieID) {
                        jQuery.ajax({
                            url: '/getProducts/' + categorieID,
                            type: "GET",
                            dataType: "json",
                            success: function(data) {
                                console.log(data);
                                jQuery('select[name="product"]').empty();
                                jQuery.each(data, function(key, value) {
                                    $('select[name="product"]').append('<option value="' +
                                        key + '">' + value + '</option>');
                                });
                            }
                        });
                    } else {
                        $('select[name="product"]').empty();
                    }


                });



                    jQuery('select[name="product"]').on('change', function() {
                        var productID = jQuery(this).val();
                        if (productID) {
                            jQuery.ajax({
                                url: '/getDesignation/' + productID,
                                type: "GET",
                                dataType: "json",
                                success: function(data) {
                                    console.log(data);
                                    jQuery('select[name="designation"]').empty();
                                    jQuery.each(data, function(key, value) {
                                        $('select[name="designation"]').append(
                                            '<option value="' + key + '">' +
                                            value +
                                            '</option>');
                                    });
                                }
                            });
                        } else {
                            $('select[name="designation"]').empty();
                        }
                    });
                });

</script>