Зависимое выпадающее меню в laravel 8

#jquery #laravel-8 #cascadingdropdown

Вопрос:

Мне нужен зависимый выпадающий список с 4 уровнями. Сначала я попробовал с двумя уровнями, но не получилось. Я попробовал немного кодирования, но все затрудняются перечислить второй выпадающий список. Кто-нибудь может мне помочь? Какие-либо проблемы в jQuery? Настоящим прилагается мой код,

Контроллер

Имя контроллера — SubjectController

 public function getDepartments($id) 
    {        
        $departments = DB::table("departments")->where("faculty_id",$id)
->pluck("department_name","id");
        return json_encode($departments);
    }

public function getFaculties()
        {
            $faculties = DB::table('faculties')->pluck("faculty_name","id");
            return view('pages/subject/view-subject',compact('faculties'));
        }
 

Вид

  <div class="col-md-4">
                              <label for="faculty">Select Faculty</label>
                                <select class="form-control m-b"  name="faculty">
                                    <option value="">  Faculty </option>
                                    @foreach ($faculties as $key => $value)
                                    <option value="{{ $key }}"> {{ $value }} </option>
                                    @endforeach
                                  </select>
                              </div>
                                                                            
                            <div class="col-md-4">
                              <label for="department">Select Department:</label>
                                <select class="form-control m-b" name="department">
                                    <option>Department</option>                                   
                                </select>
                            </div>  

<script type="text/javascript">
  jQuery(document).ready(function ()
  {
          jQuery('select[name="faculty"]').on('change',function(){
             var facultyID = jQuery(this).val();
             if(facultyID)
             {
                jQuery.ajax({
                   url : 'pages/subject/view-subject/getDepartments'  facultyID,
                   type : "GET",
                   dataType : "json",
                   success:function(data)
                   {
                      console.log(data);                     
                      jQuery('select[name="department"]').empty();
                      jQuery.each(data, function(key,value){
                         $('select[name="department"]').append('<option value="'  key  '">'  value  '</option>');
                      });
                   }
                });
             }
             else
             {
                $('select[name="department"]').empty();
             }
          });
  });
  </script>
 

дБ
Две таблицы, используемые для фильтрации

 public function up()
    {
        Schema::create('faculties', function (Blueprint $table) {
            $table->id();
            $table->string('faculty_name'); 
            $table->timestamps();
        });
    }

 public function up()
    {
        Schema::create('departments', function (Blueprint $table) {
            $table->id();
            $table->string('department_name');
            $table->unsignedBigInteger('faculty_id');
            $table->foreign('faculty_id')->references('id')->on('faculties'); 
            $table->timestamps();
        });
    }
 

сеть

 Route::get('pages/subject/view-subject','AppHttpControllersSubjectController@getFaculties')->name('pages/subject/view-subject');

Route::get('pages/subject/view-subject/getDepartments{id}','AppHttpControllersSubjectController@getDepartments')->name('getDepartments');