如何使用Jquery使下拉列表依赖于laravel中的另一个下拉列表?

我有三张桌子。。我想得到与一个地方相关联的类别。。所以当我选择一个地方时,它会过滤类别并显示该地方的类别列表。 建立了多对多的关系。

-----     -------------    ------------
place     category_place      category
------    --------------   ------------
id         place_id          id
name        category_id       name
-------------------------------------

位置模型:

   public function categories()
    {
        return $this->belongsToMany('App\Category','category_places','place_id','category_id');
    }

在我的项目控制器中

     public function create()
    {
        $activeMenu = 'placetypes';
        $placetype = new PlaceType();
        return view('Admin.placeTypes.create',['placetype'=>$placetype,'activeMenu'=>$activeMenu]);
    }

    /**
     * Store a newly created resource in storage.
     *
     * @param  \Illuminate\Http\Request  $request
     * @return \Illuminate\Http\Response
     */
    public function store(PlaceTypeFormRequest $request)
    {
//        PlaceType::create([
//            'name'=>$request->input('name'),
//            'icon'=>$request->input('icon'),
//            'status'=>$request->input('status'),
//        ]);
        if($request->hasFile('image_name'))
        {
            $filenameWithExt = $request->file('image_name')->getClientOriginalName();
            $filename = pathinfo($filenameWithExt,PATHINFO_FILENAME);
            $extension = $request->file('image_name')->getClientOriginalExtension();
            $fileNameToStore = $filename.'_'.time().'.'.$extension;
            $path = $request->file('image_name')->storeAs('public/photos',$fileNameToStore);
        }else
        {
            $fileNameToStore = 'No-Image-Available.png';
        }
        $pt = new PlaceType();
        $pt->name = $request->input('name');
        $pt->status = $request->input('status');
        $pt->icon = $fileNameToStore;
        $pt->save();

        return redirect('/placeTypes')->with('succes','تمت إضافة قسم المحل بنجاح');
    }

在ruoutes web.php中

Route::resource('places','Admin\PlaceController');

....

   <div class="form-group" >
                <label class="text-primary" dir="rtl" for="exampleFormControlSelect1">{{trans('admin.theplace')}}</label>
                <select class="form-control" name="place" data-style="btn btn-link" id="exampleFormControlSelect1">
                    @foreach($places as $pt)
                    <option value="{{$pt->id}}" {{ ($pt->name)? "selected" : '' }}  >{{$pt->name}}</option>
                    @endforeach
                </select>
            </div>
            <div class="form-group" >
                <label class="text-primary" dir="rtl" for="exampleFormControlSelect1">{{trans('admin.itemCats')}}</label>
                <select class="form-control" name="itemcat" id="category" data-style="btn btn-link" id="exampleFormControlSelect1">
                    @foreach($categories as $cat)
                    <option value="{{ $cat->id }}" {{ (isset($cat->name))? "selected" : '' }}  >{{$cat->name}}</option>
                    @endforeach
                </select>
            </div>

Jquery代码:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
    <script>
        function dropdown(msg){
            var place=msg;
            $.ajax({
                url: 'getcategory/'+place,
                type: 'get',
                dataType: 'json',
                success: function(response){
                    $("#category").empty();

                    var len = 0;
                    if(response['data'] != null){
                        len = response['data'].length;
                    }
                    if(len > 0){
                        // Read data and create <option >
                        for(var i=0; i<len; i++){

                            var id = response['data'][i].id;
                            var name = response['data'][i].name;

                            var option = "<option value='"+name+"'>"+name+"</option>";

                            $("#category").append(option);
                        }
                    }

                }
            });
        }
    </script>