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.pngtabel tipes.png
2.       Table pekerjaans tabel-pekerjaans.pngtabel pekerjaans.png 3.       Table hargas tabel-hargas.pngtabel 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.pngtampilan form.png
avatar bgpoels

@bgpoels

17 Kontribusi 0 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