Load dependent dropdown on Edit Laravel

Question

How to automatically load or retrieve the subcategory/dependent dropdown based on the selected value of parent dropdown in Edit. If I click the edit, the doctor should instantly load. I've been searching for hours for the solutions please help.

Blade

<select name="clinic_id" data-placeholder="Search" data-allow-clear="true"
   class="form-control select2bs4" style="width: 100%;" id="load_clinic">
   <option selected="selected"></option>
       @foreach ($clinic as $id => $item)
         <option value="{{ $id }}"
             {{ $schedule->clinic_id == $id ? 'selected' : '' }}>
              {{ $item }}
         </option>
       @endforeach
</select>

<select name="doctor_id" data-placeholder="Search" data-allow-clear="true"
    class="form-control select2bs4" style="width: 100%;" id="load_doctor">
</select>

Javascript

 $(document).ready(function() {
        $('#load_clinic').on('change', function(e) {
            var clinic_id = e.target.value;
            if (clinic_id) {
                $.ajax({
                    url: "{{ route('getDoctor') }}",
                    type: "POST",
                    data: {
                        clinic_id: clinic_id,
                        _token: "{{ csrf_token() }}"
                    },
                    success: function(data) {
                        if (data) {
                            $('#load_doctor').empty();
                            $('#load_doctor').append(
                                '<option value=""> Select Doctor</option>');
                            $.each(data, function(key, value) {
                                $('#load_doctor').append($(
                                    "<option/>", {
                                        value: key,
                                        text: value
                                    }));

                            });
                        } else {
                            $('#load_doctor').empty();
                        }
                    }
                })
            } else {
                $('#load_doctor').empty();
            }
        });
    });

Controller

public function edit($id)
{
    $schedule = Schedule::findOrFail($id);
    $clinic = Clinic::pluck('name', 'id');
    $doctor = Doctor::get()->pluck('full_name', 'id');
    return view('admin.schedule.edit', compact('schedule', 'doctor', 'clinic'));
}

public function getDoctor(Request $request)
{
    $id = $request->clinic_id;
    $doctor = Doctor::where('clinic_id', $id)->get()->pluck('full_name', 'id');
    return response()->json($doctor);
}

Answer 1

You can get initial select options with PHP before resorting to ajax.

Consider using plural nouns when you are using get() and singular when using i.e. first()

Also, consider using @if(condition) @endif instead of ternary operators in blade

This is solution with PHP, if you want to get doctors with AJAX, in addition to onChange listener, you should also call it when page loads,

Controller

public function edit($id)
{
    $schedule = Schedule::findOrFail($id);
    $clinic = Clinic::pluck('name', 'id');
    $doctor = Doctor::where('clinic_id', $schedule->clinic_id)->get();
    return view("admin.schedule.edit", compact('schedule', 'doctor', 'clinic'));
}

Blade

<select name="clinic_id" data-placeholder="Search" data-allow-clear="true"
   class="form-control select2bs4" style="width: 100%;" id="load_clinic">
   <option selected="selected"></option>
       @foreach ($clinic as $id => $item)
         <option value="{{ $id }}"
             {{ $schedule->clinic_id == $id ? 'selected' : '' }}>
              {{ $item }}
         </option>
       @endforeach
</select>

<select name="doctor_id" data-placeholder="Search" data-allow-clear="true"
    class="form-control select2bs4" style="width: 100%;" id="load_doctor">
    @foreach($doctor as $item)
        <option value="{{$item->id}}">{{$item->full_name}}</option>
    @endforeach
</select>