Filtering select options by related values using jQuery post in Laravel, how can I display data returned from the controller?

Question

I'm trying to filter my select option with other select option using jquery post, where if certain outlet is selected, the the next select option whic is karyawan will only display karyawan that assign to that outlet, but i don't know to handle the response i get from controller, can anyone help me?

this my view

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

this is my script

$(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.');
        }
      });
    });
  });

and this is my controller

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

        return $kritems;
    }

and this is the response i get

[{"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":"[email protected]","pendidikan":"s2","tanggal_bergabung":"2023-05-24","outlet":"6","jabatan":"Section Head of IT","divisi":"IT","url_foto":"ff.jpg"}]

but I don't know how to display it to my view

Answer 1

So first of all give the id to select element for further use such as karyawan like this,

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

Then in your ajax response() function, render all the options like this,

$(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.');
      }
    });
  });
});