Recargando combos dependientes

Enviado por admin el 07/12/2017 Deje un comentario (0) Ir a comentarios

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>