如何使用 Jquery 使下拉列表依賴於 laravel 中的另一個下拉列表？

Question

我有三個表。我想獲取與某個地點相關聯的類別。所以當我選擇一個地點時，它會過濾類別並向我顯示該地點的類別列表。 設置了多對多的關系。

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

放置 model：

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

---

在我的項目 controller

     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','تمت إضافة قسم المحل بنجاح');
    }

在規則 web.php

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

....在我的 create.blade.php 視圖中

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

Answer 1

使用 onchange。試試這個

<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}} onchange="dropdown('{{$p->id}}')"</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>

Answer 2

我必須經常這樣做，這是我的做法
HTML/刀片

<select name="select_name" id="select1" class="form-control">
<option value="">choose</option
@foreach($models as $model)
<option value="{{ $model->id }}">{{ $model->attribute }}</option>
@endforeach
</select>

<select name="select_name" id="select2" class="form-control">
<option value="">choose select 1 first</option>
</select>

這是 jQuery

$("#select1").change(function(e){
var model = e.target.value;
$.get("/api/your-route?input="+model, function(data){
  $("#select2").empty();
  $("#select2").append("<option value=''>choose</option>");

  $.each(data, function(index, obj){
  $("#select2").append("<option value='model.id'>model.attribute</option>");
});
});
});

Laravel

public function func_name(Request $request){
//if you work with Laravel 5.8 or older, you could you the input facade
$childern = Child::where('parent_id', $request->input('parent'))->get();

return response()->json($childern, 200);
// if you want to use a resource, that's even better
}

它總是像魅力一樣對我有用，並且由於每次父項更改時我都會從 api 獲取值，因此我不必擔心有人會玩檢查員的值

Answer 3

不要向 getcategory/{place} 發出 GET 請求，而是嘗試向 getcategory 發出請求並將地點 ID 作為周界傳遞。 您還需要在位置下拉列表中設置更改方法。

jQuery

$('#exampleFormControlSelect1').change(function() {

 $.ajax({
  url: '/getcategory',
  type: 'GET',
  data: {id: $('#exampleFormControlSelect1').val()}
 }).done(function(response){
    //what you want to do with your response//
  });
});

Controller

public function getCategory(Request $request)
    {

        return Place::where('id', $request->id)->categories()->pivot->category_id->get();
    }

從這里您的響應應該是 pivot 表中所有 category_ids 的集合，用於您經過的地方。