Jquery Laravel 7相关下拉列表3级

我有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>

@foreach（$key=>$value的类别）
{{$value}}
@endforeach

脚本

<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>

jQuery（文档）.ready（函数（）{
jQuery（'select[name=“categorie”]”）。在（'change'，function（）上{
var categorieID=jQuery（this.val（）；
如果（分类ID）{
jQuery.ajax({
url:'/getProducts/'+categorieID，
键入：“获取”，
数据类型：“json”，
成功：功能（数据）{
控制台日志（数据）；
jQuery（'select[name=“product”]”）。空（）；
每个（数据、函数（键、值）{
$（'select[name=“product”]”）。追加（''+value+''）；
});
}
});
}否则{
$（'select[name=“product”]”）。空（）；
}
});
jQuery（'select[name=“product”]”）。在（'change'，function（）上{
var productID=jQuery（this.val（）；
if（productID）{
jQuery.ajax({
url:'/getDesignation/'+productID，
键入：“获取”，
数据类型：“json”，
成功：功能（数据）{
控制台日志（数据）；
jQuery（'select[name=“designation”]'）.empty（）；
每个（数据、函数（键、值）{
$（'select[name=“designation”]”）。追加(
'' +
价值观+
'');
});
}
});
}否则{
$（'select[name=“designation”]）.empty（）；
}
});
});