Es habitual que tengamos en un formulario el típico combo de provincias y localidades, para ello suelo usar la siguiente función:
function combosObj(padre, hijo, path){
this.padre = padre;
this.hijo = hijo;
this.path = path;
var _self = this;
this.load = function(id){
$.ajax({
method: 'GET',
url: this.path + '/' + id,
dataType: 'json'
})
.done(function( resultado ) {
$('select[name="'+_self.hijo+'"] option').remove();
$.each(resultado, function(i, item) {
$('select[name="'+_self.hijo+'"]').append($('<option>').text(item.label).val(item.id));
});
if ($('select[name="'+_self.hijo+'"]').attr('data-default')) {
$('select[name="'+_self.hijo+'"] option[value="'+$('select[name="'+_self.hijo+'"]').data('default')+'"]').prop('selected', 'selected');
}
});
}
this.load($('select[name="'+this.padre+'"]').val());
$('select[name="'+this.padre+'"]').change(function(){
_self.load($(this).val());
});
}
Y para usarla es tan sencillo como pasarle el nombre del select “padre”, el select “hijo” y la url que va a devolver un JSON con los valores a cargar (el JSON debe ser un array con valores id y label):
$(document).ready(function() {
new combosObj('provincia_id', 'localidad_id', '/localidades');
new combosObj('categoria_id', 'subcategoria_id', '/subcategorias');
});
En el caso de que tengamos un valor por defecto en el combo “hijo”, deberemos añadirle un atributo data-default con el id que queramos por defecto
<div class="form-group">
<label for="">Provincia</label>
<select name="provincia_id" class="form-control">
@foreach($provincias as $item)
<option value="{{$item->id}}">{{$item->provincia}}</option>
@endforeach
</select>
</div>
<div class="form-group">
<label for="">Localidad clínica</label>
<select name="localidad_id" class="form-control" data-default="{{$default_id}}">
</select>
</div>