我正试着用jQuery POST过滤我的SELECT选项和其他SELECT选项,如果 Select 了某个插座,下一个SELECT选项是NITRIAWAN将只显示分配给那个插座的HERNAWAN,但我不知道如何处理从控制器得到的响应,有人能帮我吗?

这是我的观点

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

这是我的 playbook

$(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"}]

但我不知道如何在我的视野中展示它

推荐答案

所以首先给出idselect的元素以供进一步使用,比如karyawan这样,

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

然后在您的AJAX response()函数中,像这样呈现所有选项,

$(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) {
         // grab the elemtent to where we have to render,then make it empty and render the options.
          let karyawan = $("#karyawan");
          karyawan.empty();
          response.forEach(val => {
            karyawan.append(`<option value="${val.nama}">${val.nama}</option>`);
          });
      },
      error: function() {
        alert('Failed to fetch karyawan.');
      }
    });
  });
});

Jquery相关问答推荐

这是否会导致内存泄漏?

使用jQuery筛选器搜索输入仅适用于单词的一部分

从 React 到 Node 服务器的 ajax 调用中的数据未定义

jQuery .append() 创建两个元素而不是一个

JQuery:$.get 不是函数

[本机代码]是什么意思?

清除并刷新 jQuery Chosen 下拉列表

非 AJAX jQuery POST 请求

jQuery计算所有文本字段中的值的总和

使用 jQuery 验证插件自定义日期格式

从附加元素获取 jQuery 对象的更简单方法

将字符串true和false转为布尔值

$(document).on("click"... 不工作?

带有 jQ​​uery 的饼图

!!~(不是波浪号/bang bang 波浪号)如何改变包含/包含数组方法调用的结果?

jQuery确定匹配的类是否具有给定的ID

jQuery empty() 与 remove()

$.getJSON 在 IE8 中返回缓存数据

jQuery .each() 索引?

Drop 事件未在 chrome 中触发