how to make drop-down list dependent form another drop-down list in laravel using Jquery?

Question

I have three tables .. I want to get categories that are associated to a place.. so when I choose a place, it filters the categories and shows me the categories list of that place. Many to many relationships are set.

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

Place model:

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

---

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

in ruoutes web.php

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

.... in my create.blade.php view

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

<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

Instead of making a GET request to getcategory/{place} try to make the request to getcategory and pass the place id as a perimeter. You also need to have the change method on the place dropdown.

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();
    }

From here your response should be a collection of all the category_ids in the pivot table for the place that you pass.

Answer 2

I have to do this often, and this my way of doing it
HTML/Blade

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

And this is 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
}

It always worked for me like a charm, and since i get values from api every time the parent changes, I don't have to worry about someone playing with values from the inspector

Answer 3

use onchange .try this

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