ajax - 动态选择选项取决于 laravel 中的另一个选择选项

Question

我有两个表作为用户和部门。我的 departments 表有两列 id 和 title，我的 users 表包含用户信息列和一个 exta 列作为 dept_id，它与 department 表 id 相关。I want to create a dropdown select option for departement and when a departement is selected the users which have that related department id should be displayed into another dropdown, how can i do that..?
我正在 Controller 中获取所有用户和部门数据并将其发送给查看。

我的 Controller 是....

    public function index()
    {
      $user = DB::table('users')->get();
      $dept =  DB::table('departments')->get();
      return view('userview', compact('user', 'dept'));
    }

我的观点是......

<select class="form-control" id="department" name="department" >
           @foreach($dept as $dept)
                 <option value="{{ $dept->id }}">{{ $dept->name }}</option>
            @endforeach
 </select>    
 
 
 <select class="form-control" id="user" name="user" >     
      <option>   </option>  
 </select>                                          

Answer 1

我会使用 Ajax 请求来获取相关用户并填充第二个列表。在 User 和 Department 模型中设置关系，例如:

// Department.php
public function users() {
    return $this->hasMany(User::class);
}

// User.php
public function department() {
    return $this->belongsTo(Department::class);
}

在你的 Controller 中:

// DepartmentController.php
public function index() { 
    return view('userview', [
        'departments' => Department::all()
    ]);
}

public function users(Request $request, $id) {
    if ($request->ajax()) {
        return response()->json([
            'users' => User::where('dept_id', $id)->get()
        ]);
    }
}

然后在您的 View 中，为第一次选择的更改事件设置一个事件监听器:

<select class="form-control" id="department" name="department" >
     @foreach($departments as $dept) 
        <option value="{{ $dept->id }}">{{ $dept->name }}</option>
     @endforeach 
</select> 

<select class="form-control" id="user" name="user" ></select>

<script>
    $('#department').on('change', e => {
        $('#user').empty()
        $.ajax({
            url: `/departments/${e.value}/users`,
            success: data => {
                data.users.forEach(user =>
                    $('#user').append(`<option value="${user.id}">${user.name}</option>`)
                )
            }
        })
    })
</script>