在Laravel中使用jQuery post通过相关值过滤选择选项,如何显示从控制器返回的数据?

oknrviil  于 2023-06-05  发布在  jQuery
关注(0)|答案(1)|浏览(175)

我试图使用jquery post过滤我的选择选项和其他选择选项,如果选择了某个插座,下一个选择选项是karyawan,它只会显示分配给该插座的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"}]

但我不知道如何在我看来

dfuffjeb

dfuffjeb1#

所以首先给予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.');
      }
    });
  });
});

相关问题