Dropdown dynamic bertingkat

selamat pagi....

mohon bantuan nya gan... saya tidak berhasil menampilkan pekerjaan berdasarkan idtipe(tipe mobil) dari tabel hargas, dimana pada tabel hargas tersebut sudah tersimpan idtipe(utk mobil) dan idpekerjaan(utk jasa/pekerjaan).

jadi saat tipe mobil dipilih maka pekerjaan/jasa berdasarkan idtipe tersebut akan nampil dipilihan pekerjaan dan saat pekerjaan dipilih maka akan menampilkan harga berdasarkan idtipe dan idpekerjaan...

mohon bantuannya agan2 sekalian... terimakasih

1. Table tipes

tabel tipes.png

2. Table pekerjaans

tabel pekerjaans.png

3. Table hargas

tabel hargas.png

4. Route Route::post('fetch', [TransaksiController::class, 'fetch'])->name('fetch');

5. Controller public function createtransaksi()

{

        $mobil = Harga::groupBy('idtipe')->select('idtipe', \DB::raw('count(*) as total'))->get();

        return view('transaksi.input')->with('mobil',$mobil);

    }

public function fetch(Request $request)

{

$select=$request->get('select');

$value=$request->get('value');

$dependent=$request->get('dependent');

$data=DB::table('hargas')

->where($select,$value)

->groupBy($dependent)

->get();

$output ='<option value="">Select '.ucfirst($dependent).'</option>';

foreach($data as $row)

{

$output .='<option value="'.$row->$dependent.'">'.$row->$dependent.'</option>';

}

echo $output;

}

6. View <div class="form-group">

<label for="idtipe">Tipe Mobil</label>

<select class="form-control form-control-lg dynamic" id="idtipe" name="idtipe"  data-dependent="idpekerjaan">

<option value="" selected>-- Pilih Tipe Mobil --</option>

@foreach($mobil as $b)

<option value="{{ $b->idtipe }}">{{ $b->tipe->tipemobil }}</option>

@endforeach

</select>

</div>

<div class="form-group">

<label for="pekerjaan">Pekerjaan</label>

<select class="form-control form-control-lg dynamic" id="idpekerjaan" name="idpekerjaan"  data-dependent="harga">

<option value="" selected>-- Pilih Jasa / Pekerjaan --</option>

</select>

</div>

<div class="form-group">

<label for="harga">Harga</label>

<input type="text" class="form-control dynamic" id="harga" name="harga" readonly value="">

</div>

7. Script ajax jquery <script>

$(document).ready(function(){

$(.dynamic).change(function(){

if($(this).val() !='')

{

var select=$(this).attr("idtipe");

var value=$(this).val();

var dependent=$(this).data('dependent');

var _token=$('input=[name="_token"]').val();

$.ajax({

url:"{{route('fetch')}}",

method:"POST",

data:{select:select,value:value,_token:_token,dependent:dependent},

success:function(result)

{

$('#'+dependent).html(result);

}

});

}

});

});

</script>

8. Tampilan form (tidak dapat menampilkan pekerjaan) tampilan form.png

avatar bgpoels
@bgpoels

35 Kontribusi 2 Poin

Dipost 2 tahun yang lalu

Belum ada Jawaban. Jadi yang pertama Jawaban

Login untuk ikut Jawaban