Cara Menampilkan Data Dropdown Berdasarkan Data Parent di Laravel

program.jpgprogram.jpg
Selamat pagi, bagaimana ya cara menampilkan data dropdown/select-option berdasarkan data parent di laravel ?

Dengan kode yang saya buat di bawah ini, saya sudah bisa menampilkan data program di dropdown ketika saya memilih mode 1 atau active online. Tapi ketika saya memilih mode 2 atau Full Hybrid, data di dropdown tidak muncul.

Route

Route::post('/programs', function (Request $request) {

    $programs = App\Models\Program::where('mode',$request->mode_id)
    ->with('programs')
    ->get();

    return response()->json([
        'programs' => $programs
    ]);
   
})->name('program');


Model

<?php

namespace App\Models;

use Illuminate\Database\Eloquent\Factories\HasFactory;
use Illuminate\Database\Eloquent\Model;
use Illuminate\Database\Eloquent\SoftDeletes;

class Program extends Model
{
    use HasFactory;
    use SoftDeletes;

    protected $table = 'programs';
    protected $fillable = ['nama', 'department', 'mode', 'enabled'];
    protected $dates = ['updated_at','created_at'];

    public function programs()
    {
        return $this->hasMany('App\Models\Program', 'mode');
    }
}

Blade

<meta name="csrf-token" content="{{ csrf_token() }}">
...
...
...
<div class="form-group row">
    <div class="col-md-6 mb-3">
        <label for="mode">Mode</label>
        <select class="custom-select @error('mode') is-invalid @enderror" id="mode" name="mode">
            <option hidden>Choose Program</option>
            <option value="1">Active Online</option>
            <option value="2">Full Hybrid</option>
        </select>
        @error('mode')
        <div class="invalid-feedback">
            {{$message}}
        </div>
        @enderror
    </div>
    <div class="col-md-6 mb-3">
        <label for="pro">Program</label>
        <select class="custom-select @error('program_id') is-invalid @enderror" id="program" name="program_id">
        </select>
        @error('program_id')
        <div class="invalid-feedback">
            {{$message}}
        </div>
        @enderror
    </div>
</div>

...
...
...
<script>
    $.ajaxSetup({
        headers: {
            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
        }
    });
    
    $(document).ready(function () {    
        $('select[name="mode"]').on('change',function(e) {
         
            var mode_id = e.target.value;
    
         $.ajax({
               
               url:"{{ route('program') }}",
               type:"POST",
               data: {
                   mode_id: mode_id
                },
              
               success:function (data) {
    
                // console.log(mode_id);
                   
    
                $('#program').empty();
    
                $.each(data.programs[0].programs,function(index,program){
                    
                    $('#program').append('<option value="'+program.id+'">'+program.nama+'</option>');
                })
    
               }
               
           })
        });
    
    });
</script>

Bagaimana cara yang benar untuk membuat atau menampilkan data di dropdown berdasarkan parent/mode ? terimakasih

avatar hilmih3101

@hilmih3101

34 Kontribusi 18 Poin


Jawaban

Belum ada Jawaban, jadi yang pertama

Login untuk gabung berdiskusi
premium logo tube

Hey, sedang ada diskon premium untuk akses semua kelas. Lihat di sini