Laravel 8.83 , How to fill dynamicly select component.

@MohamedTammam

create.blade.php

                    <div class="form-group">
                        <label for="semester">Semester</label>
                        <input type="number" class="form-control" id="semester" name="semester" value="{{ old('semester') }}" maxlength="2" required>
                        @error('semester')
                            <div>{{ $message }}</div>
                        @enderror
                    </div>

                    <div class="form-group">
                        <label for="id_jurusan">Jurusan</label>
                        <select id="id_jurusan" name="id_jurusan" class="form-control" required>
                            <option value="">Pilih Jurusan</option>
                            @foreach ($jurusan as $j)
                                <option value="{{ $j->id_jurusan }}" {{ old('id_jurusan') == $j->id_jurusan? 'selected' : '' }}>
                                    {{ $j->nama_jurusan }}
                                </option>
                            @endforeach
                        </select>
                    </div>

                    <div class="form-group">
                        <label for="id_kelas">Kelas</label>
                        <select id="id_kelas" name="id_kelas" class="form-control" required>
                      
                        </select>
                    </div>

please code for dynamic fill for select id_kelas after select id_jurusan.

this my control

public function create() { $jurusan = Jurusan::all();

    $kelas = Kelas::all();
  
    
    return view('jadwal.create', compact('jurusan','kelas'));

}

@samsu007

<div
    x-data='{
        jurusan: old("id_jurusan") ?? "",
        kelasOptions: @json($kelas),
        get kelasInputOptions() {
            return this.kelasOptions.filter(k => k.id_jurusan == this.jurusan);
        },
    }''
>
    ...
    <div class="form-group">
        <label for="id_jurusan">Jurusan</label>
        <select x-model="jurusan" id="id_jurusan" name="id_jurusan" class="form-control" required>
            <option value="">Pilih Jurusan</option>
            @foreach ($jurusan as $j)
            <option value="{{ $j->id_jurusan }}" {{ old('id_jurusan') == $j->id_jurusan? 'selected' : '' }}>
                {{ $j->nama_jurusan }}
            </option>
            @endforeach
        </select>
    </div>
    
    <div class="form-group">
        <label for="id_kelas">Kelas</label>
        <select id="id_kelas" name="id_kelas" class="form-control" required>
            <template x-for="kelas in kelasInputOptions">
                <option x-bind:value="kelas.id" :key="kelas.id">{{ kelas.name }}</option>
            </template>
        </select>
    </div>
    ...
</div>

I used AlpineJS for achieving this. It could've been achieved using AJAX or Livewire also.