动态选择选项取决于laravel中的另一个选择选项 [英] dynamic select options depend on another select option in laravel

问题描述

我有两个表作为用户和部门.我的Departments表有两列，分别是id和title，我的users表包含用户信息列，还有一个exta列，如dept_id，它与Department表ID有关. 我想创建DEPARTEMENT和当DEPARTEMENT选择其中有相关的部门ID应显示为另一个下拉列表中的用户，我怎么能做到这一点..?点击下拉选择选项 我正在获取控制器中所有用户和部门的数据，并将其发送给视图.

I have two tables as users and departements. My departments table have two columns as id and title and my users table contains users information columns and one exta column as dept_id which is related to department table 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..?
i am fetching all users and departments data in controller and sending it to view.

我的控制器是....

my controller is....

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

我的看法是......

and my view is....

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

推荐答案

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

I would use an Ajax request to fetch the related users and populate the 2nd list. Set up the relation in the User and Department models like:

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

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

在您的控制器中:

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

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

Then in your view, setup an event listener for the change event on the first select:

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

这篇关于动态选择选项取决于laravel中的另一个选择选项的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！