Estoy realizando un select dinamico en Laravel con AJAX. Es un select entre marcas y modelos. AJAX me identifica la marca seleccionada pero luego cuando voy a seleccionar el modelo en vez de aparecerme las opciones correspondientes a la marca seleccionada previamente me aparece undefined como opcion.
Este es mi metodo en ModelController:
public function byBrand ($id){
return ModelP::where('brand_id', $id)->get();
}
Mi ruta en api.php:
Route::get('/brands/{id}/modelos', 'Backend\ModelController@byBrand');
Ambos select:
<div class="form-group col-md-3">
<label for="brand_id">Marca</label>
<select name="brand_id" class="form-control" id="select-brand">
<option value="">Seleccionar</option>
@foreach ($brands as $brand)
<option value="{{ $brand->id }}">{{ $brand->brandName }}</option>
@endforeach
</select>
</div>
<div class="form-group col-md-3">
<label for="model_id">Modelo</label>
<select name="model_id" class="form-control" id="select-model">
<option value="">Seleccionar</option>
@foreach ($models as $model)
<option value="{{ $model->id }}">{{ $model->modelName }}</option>
@endforeach
</select>
</div>
Mi script:
$(function(){
$('#select-brand').on('change', onSelectBrandChange);
});
function onSelectBrandChange() {
var brand_id = $(this).val(); //Identifica el valor de la marca seleccionada.
$.get('/api/brands/'+brand_id+'/modelos', function(data){
var html_select = '<option value="">Seleccionar</option>';
for (var i=0; i<data.length; i++)
html_select +='<option value="'+data[i].id+'">'+data[i].name+'</option>';
console.log(html_select);
$('#select-model').html(html_select);
});
}
Lo que me devuelve la consola al seleccionar una marca y luego intentar seleccionar un modelo:
<option value="">Seleccionar</option><option value="2">undefined</option>
En este caso seleccione la marca con id = 2