First of all this question might be noob because i only have basic in JS.
The question is, i already create Category data in Thrust's page which only have 4IR and DEB. Which mean in Thrust DB, it have category_id.
So in this page, when i select Thrust, it should show Category that link with Thrust.
But for this case, when i select Thrust, the Category does not appear. Am i doing something wrong here? Im so lost right now
$("#pilih1").change(function() {
var thrus_id = $(this).val();
var thrusts = @json($thrusts->toArray());
$("#pilih2").html(``);
thrusts.forEach(thrust => {
console.log(thrusts);
if (thrust.thrus_id == thrus_id) {
$("#pilih2").append(`
<option value="` + thrust.id + `">` + thrust.category + `</option>
`);
}
});
}); <div class="mb-3 row">
<label class="col-sm-2 col-form-label" for="namaStrategy">Strategy Name</label>
<div class="col-sm-10" style="width:30%">
<input class="form-control" type="text" name="namaStrategy" />
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label" for="thrus_id">Thrust</label>
<div class="col-sm-10" style="width:30%">
<select class="form-control" name="thrus_id" id="pilih1">
<option selected disabled hidden>PLEASE CHOOSE</option>
@foreach ($thrusts as $thrust)
<option value="{{ $thrust->id }}">{{ $thrust->namaThrust }}</option>
@endforeach
</select>
</div>
</div>
<div class="mb-3 row">
<label class="col-sm-2 col-form-label" for="">Category</label>
<div class="col-sm-10" style="width:30%">
<select class="form-control" name="category" id="pilih2">
<option selected disabled hidden>PLEASE CHOOSE</option>
<option value="DEB">DEB</option>
<option value="4IR">4IR</option>
</select>
</div>
</div>