How to create dynamic select option chantiers ouvrages in laravel? - php

Question

I have two selects, the 1st filled by ouvrages and other by chantiers there is between them belongsTo relation, I want when I choose chantier in 1st select the 2nd filled by ouvrages corresponds, but in my case it gives me empty data.
mois.blade.php
//select chantiers
<select class="form-control" id="chantier_id">
<option selected disabled>Select Location</option>
#foreach($chantiers as $chantier)
<option value="{{ $chantier->id }}">{{ $chantier->chantier}}</option>
#endforeach
</select>
//select ouvrages
<select class="form-control" id="ouvrage_id">
<option value="0" selected disabled>- Select -</option>
</select>
jQuery
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
});
$(document).ready(function(){
$("#chantier_id").change(function(){
var chantier = $(this).val();
$.ajax({
url: "{{ route('salarie.select') }}",
type: 'post',
data: {
chantier:chantier,
"_token": "{{ csrf_token() }}"
},
dataType: 'json',
success:function(response){
console.log(response);
var len = response.length;
$("#ouvrage_id").empty();
for( var i = 0; i<len; i++){
var id = response[i]['id'];
var ouvrage = response[i]['ouvrage'];
$("#ouvrage_id").append("<option value='"+id+"'>"+ouvrage+"</option>");
}
}
});
});
});
</script>
SalarieController.php
public function select(request $request){
$ouvrages = Ouvrage::where('chantier_id',$request->chantier_id);
return response()->json(['options'=>$ouvrages]);
}
web.php
Route::post('/select','SalarieController#select')->name('salarie.select');
Route::get('/mois','SalarieController#mois');

Answer 1

You need jQuery.parse(response) to parse json
and change loop to $.each to make it easy and less complex.
<script type="text/javascript">
$(document).ready(function() {
$('#example').DataTable();
$("#chantier_id").change(function(){
var chantier = $(this).val();
$.ajax({
url: "{{ route('salarie.select') }}",
type: 'post',
data: {
chantier:chantier,
"_token": "{{ csrf_token() }}"
},
dataType: 'json',
success:function(response){
console.log(jQuery.parse(response));
$("#ouvrage_id").empty();
$.each( jQuery.parse(response), function( key, value ) {
$("#ouvrage_id").append("<option value='"+key+"'>"+value+"</option>");
});
}
});
});
});
</script>