jquery - laravel 8中的依赖下拉列表

Question

我需要一个有 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>

DB 用于过滤的两张表

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','App\Http\Controllers\SubjectController@getFaculties')->name('pages/subject/view-subject');

Route::get('pages/subject/view-subject/getDepartments{id}','App\Http\Controllers\SubjectController@getDepartments')->name('getDepartments');

标签： jquerylaravel-8cascadingdropdown