Laravel7 依赖下拉选框不显示问题及旧值回显实现

问题场景 #

现有departments（部门）、designations（职位）两张数据表，需要实现选中部门后联动加载对应职位选项的功能，当前代码运行异常，多日排查未定位根因。

现有代码与表结构 #

数据表结构 #

departments 表

designations 表

模型关联代码 #

Department 模型

public function designation(){
   return $this->hasMany(Designation::class);
}

命名不规范：一对多关联方法名建议用复数designations，符合Laravel框架约定，避免后续隐式匹配出错。

Designation 模型

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

路由定义 #

Route::get('/getdesignation','EmployeeController@getdesignation');
    });

语法错误：末尾多了多余的闭合括号});，如果外层无对应路由组包裹，会直接触发PHP语法报错，导致接口无法访问。

控制器方法 #

public function getdesignation(Request $request){
        $data=Designation::select('designation','id')->where('department_id',$request->id)->get();
        return response()->json($data);

    }

Blade 模板代码 #

<select name="department_id" id="department_id" class="form-control" required>
   <option value="" selected>Select one</option>
   @foreach($departments as $row)
    <option value="{{ $row->id }}">{{ $row->department }}</option>
   @endforeach
 </select>
<select name="designation_id" id="designation_id" class="form-control" required></select>

<script src="https://code.jquery.com/jquery-3.6.0.min.js" integrity="sha256-/xUj+3OJU5yExlq6GSYGSHk7tPXikynS7ogEvDej/m4=" crossorigin="anonymous"></script>
    <script type="text/javascript">
   $(document).ready(function() {
      $(document).on('change', '#department_id', function() {
           var dpt_id = $(this).val();
           if (dpt_id) {
               $.ajax({
                   type: 'get',
                   url: '{!! URL::to(\'getdesignation\') !!}',
                   data: {
                       'id': dpt_id
                   },
                   success: function(data) {
                       if (data) {
                           $('#designation_id').empty();
                           $('#designation_id').append(
                               '<option hidden>Select Designation</option>');
                           $.each(data, function(key, value) {
                               $('select[name="designation_id"]').append(
                                   '<option value="' + key + '">' + value
                                   .designation + '</option>');
                           });
                       } else {
                           $('#designation_id').empty();
                       }

                   }
               });
           } else {
               $('#designation_id').empty();
           }
       });
   });
</script>

核心问题定位 #

• 路由存在语法错误，多余的闭合括号会导致接口500无法访问
• 前端选项值绑定错误：接口返回JSON数组时，$.each的key是数组索引（0/1/2…），不是职位的真实数据库ID，导致提交值错误、联动逻辑异常
• 模型关联命名不符合框架约定，后续调用关联时容易出现匹配错误

修复代码 #

1. 修复路由 #

删除多余闭合括号，建议增加路由参数校验：

Route::get('/getdesignation','EmployeeController@getdesignation');

2. 修复控制器方法 #

增加参数合法性校验，避免空参数报错：

public function getdesignation(Request $request){
    $request->validate([
        'id' => 'required|exists:departments,id'
    ]);
    $data = Designation::select('id','designation')
        ->where('department_id', $request->id)
        ->get();
    return response()->json($data);
}

3. 修复前端遍历逻辑 #

选项值绑定职位真实ID，而非数组索引：

$.each(data, function(key, value) {
    $('select[name="designation_id"]').append(
        '<option value="' + value.id + '">' + value.designation + '</option>'
    );
});

4. （建议）修复模型关联命名 #

// Department模型
public function designations(){
    return $this->hasMany(Designation::class);
}

编辑页下拉框自动选中旧值实现 #

1. 部门下拉框选中逻辑：渲染选项时匹配旧值添加selected属性，兼容编辑回显和表单提交校验失败回填

   <select name="department_id" id="department_id" class="form-control" required>
      <option value="">Select one</option>
      @foreach($departments as $row)
       <option value="{{ $row->id }}" {{ old('department_id', $employee->department_id ?? '') == $row->id ? 'selected' : '' }}>{{ $row->department }}</option>
      @endforeach
    </select>
   

2. 职位下拉框选中逻辑：页面加载完成后自动触发部门下拉框的加载逻辑，加载完职位列表后匹配旧值选中

   $(document).ready(function() {
       // 原有部门change联动逻辑保持不变
       $(document).on('change', '#department_id', function() {
           // 省略原有逻辑，注意修复value.id的绑定问题
       });
   
       // 页面初始化加载旧值
       let oldDptId = "{{ old('department_id', $employee->department_id ?? '') }}";
       let oldDesignationId = "{{ old('designation_id', $employee->designation_id ?? '') }}";
       if(oldDptId){
           $.ajax({
               type: 'get',
               url: '{!! URL::to('getdesignation') !!}',
               data: {'id': oldDptId},
               success: function(data) {
                   $('#designation_id').empty();
                   $('#designation_id').append('<option hidden>Select Designation</option>');
                   $.each(data, function(key, value) {
                       let selected = value.id == oldDesignationId ? 'selected' : '';
                       $('#designation_id').append(
                           '<option value="' + value.id + '" '+selected+'>' + value.designation + '</option>'
                       );
                   });
               }
           });
       }
   });
   

内容的提问来源于stack exchange，提问作者Shan Md Shazarul Haque 171-15-