Laravel中用jQuery Post关联筛选下拉选项，如何展示控制器返回数据？

我正尝试用jQuery Post实现下拉选项联动筛选：选中特定Outlet时，Karyawan下拉选项仅显示该Outlet对应的员工。目前已完成视图、前端脚本及Laravel控制器代码，能正常获取控制器返回的响应数据，但不知道如何把数据渲染到视图的Karyawan下拉框里，求帮助。

视图代码 #

<div class="form-group">
    <label class="control-label col-md-3 col-sm-3 col-xs-12">Outlet</label>
    <div class="col-md-9 col-sm-9 col-xs-12">
        <select class="form-control" name="outlet" id="outletSelect">
            <option value="">Choose option</option>
            @foreach($outlets as $it)
            <option value="{{$it->id}}">{{$it->nama}}</option>
            @endforeach
        </select>
    </div>
</div>
<div class="form-group">
    <label class="control-label col-md-3 col-sm-3 col-xs-12">Karyawan</label>
    <div class="col-md-9 col-sm-9 col-xs-12">
        <select class="form-control" name="nama">
            @if (isset($kritems))
            @foreach($kritems as $its)
            <option value="{{$its->nama}}">{{$its->nama}}</option>
            @endforeach
            @endif
        </select>
    </div>
</div>

原脚本代码 #

$(document).ready(function() {
    $('#outletSelect').change(function() {
      var selectedOutlet = $(this).val(); 
      var token = "{{ csrf_token() }}";
      $.ajax({
        url: "{{ route('nilai.choose') }}",
        method: 'POST',
        data: { outlet: selectedOutlet,
              '_token': token, },
        success: function(response) {
            console.log(response);
        },
        error: function() {
          alert('Failed to fetch karyawan.');
        }
      });
    });
  });

控制器代码 #

public function choose(Request $request)
{
    $outlet = Outlet::findorfail($request->outlet);
    $outlets = Outlet::all();
    $kritems = Karyawan::where('outlet', $request->outlet)->get();

    return $kritems;
}

获取到的响应数据 #

[{"id":2,"created_at":"2023-05-31T08:36:33.000000Z","updated_at":"2023-05-31T08:48:18.000000Z","user_id":18,"nama":"Hidayat","nik":"3376012705950002","nomor":"333444","alamat":"jlnjlm","email":"dayat@test.com","pendidikan":"s2","tanggal_bergabung":"2023-05-24","outlet":"6","jabatan":"Section Head of IT","divisi":"IT","url_foto":"ff.jpg"}]

解决方案 #

步骤1：给Karyawan下拉框添加ID #

先修改视图里的Karyawan下拉框，添加id="karyawanSelect"，方便JS快速定位元素：

<select class="form-control" name="nama" id="karyawanSelect">

步骤2：修改脚本渲染数据 #

在AJAX的success回调中，清空原有选项并遍历响应数据生成新选项：

$(document).ready(function() {
    $('#outletSelect').change(function() {
      var selectedOutlet = $(this).val(); 
      var token = "{{ csrf_token() }}";
      const karyawanSelect = $('#karyawanSelect');

      $.ajax({
        url: "{{ route('nilai.choose') }}",
        method: 'POST',
        data: { outlet: selectedOutlet, '_token': token },
        success: function(response) {
            // 清空下拉框原有内容，避免旧数据残留
            karyawanSelect.empty();
            // 添加默认提示选项，保持交互一致性
            karyawanSelect.append('<option value="">Choose option</option>');
            // 遍历响应数据生成员工选项
            $.each(response, function(index, karyawan) {
                karyawanSelect.append(`<option value="${karyawan.nama}">${karyawan.nama}</option>`);
            });
        },
        error: function() {
          alert('Failed to fetch karyawan.');
        }
      });
    });
  });

说明 #

• 清空原有选项是为了确保每次选择Outlet后，下拉框只显示对应员工；
• 使用模板字符串生成选项标签，代码更简洁易读；
• 若需要将员工ID作为选项值（而非姓名），只需把karyawan.nama替换为karyawan.id即可。

内容的提问来源于stack exchange，提问作者M. Rivaldi Anwar Putra