0

Buenas tengo que hacer un select dependiente y me he quedado cerca de completarlo, pero no se como rellenar el siguiente select con la info que traigo de la query.

Select categorías:
Según lo que seleccione en este me tiene que sacar las sbucategorias que están en esa categoría.

<select class="form-control formNuevo" name="categoria" id="categoria">
    <option value=""> Selecciona una categoría </option> 
        @foreach ($categorias as $cat)
           <option value="{{ $cat->amigable }}"> {{ $cat->nombre }} </option> 
        @endforeach
</select>

Select subcategoria:
Aquí es donde cargaremos las subcategorías que estén en esa categoría

<select class="form-control formNuevo" name="subcategoria" id='subcategoria'>
    <option value=""> Selecciona una subcategoría </option> 
</select>

Ruta

Route::get('admin/productos/select_category/{categoria}', 'AdminController@sacaSub');

Controller

public function sacaSub($categoria)
    {
        $subCate = Subcategoria::where('categoria', $categoria)->get();
        return with(["subCate" => $subCate]);
    }

JavaScript

$('#categoria').on('change', function(e){
        console.log(e);
        var categoria = e.target.value;
        
        $.get('select_category/' + categoria,function(data) {
        
        $('#subcategoria').empty();
        $('#subcategoria').append('<option value="0" disable="true" selected="true"></option>');
        
    })
    });

Consigo llevarme la id y hacer la query, pero no se como devolver las subcategorías a la vista y al javaScript. Dado que serán más de una subcategoria la que hay en cada categoría supongo que tendrá que ser algún foreach. Pero aquí me quede no se como avanzar.

2
  • si le das un console.log(data); notaras que es un arreglo asi que toca recorrerlo con un loop y vas imprimiendo los options por cada valor!
    – Bryro
    el 16 jun. 2020 a las 16:43
  • Me puedes guiar un poco más @Bryro
    – Miguel
    el 16 jun. 2020 a las 16:49

3 respuestas 3

0

Bien lo he solucionado así, espero sea la forma correcta.

$('#categoria').on('change', function(e){
        console.log(e);
        var categoria = e.target.value;
        
        $.get('select_category/' + categoria,function(data) {
        
        $('#subcategoria').empty();
        
        $.each(data, function(fetch, subCate){
            console.log(data);
            for(i = 0; i < subCate.length; i++){
            $('#subcategoria').append('<option value="'+ subCate[i].sAmigable +'">'+ subCate[i].nombre +'</option>');
            }
        })
     })
    });
0

Te comparto mi solución, sólo javascript, sin jquery, lo tengo hecho con especialidades médicas y doctores, al seleccionar una especialidad te muestra los doctores correspondientes, tendrías que adaptarlo a tu caso:

Esto es el código a ejecutar cuando selecciona una especialidad (getDoctors), si hay doctores cargados toma el lenght y los borra uno por uno. Luego con el id de la especialidad recupero de la BD los doctores, el select doctor_id lo asigno a una variable doctors y con el último for asigno uno por uno los doctores de esa especialidad:

            var doctors = document.getElementById("doctor_id");
            for (let i = doctors.options.length; i >= 0; i--) {
              doctors.remove(i);
            }
            var id = document.getElementById('specialty_id').value;
            axios.post('/getDoctors/'+id)
              .then((resp)=>{
                var doctors = document.getElementById("doctor_id");
                for (i = 0; i < Object.keys(resp.data).length; i++) {
                  var option = document.createElement('option');
                  option.value = resp.data[i].id;
                  option.text = resp.data[i].apeynom;
                  doctors.appendChild(option);
                }
              })
              .catch(function (error) {console.log(error);})

En el controller traigo los doctores con esta función, busca todos los que coinciden con el $id enviado:

public function getDoctors($id)
{
  $doctors = DB::table('doctors')->where('specialty_id', '=', $id)->get();
  return $doctors;
}

La ruta post para llamar a ese método getDoctors es esta, el middleware('auth') podés quitarlo si no es necesario estar logueado en tu aplicación:

Route::post('/getDoctors/{id}', 'DoctorController@getDoctors')
              ->middleware('auth')
              ->name('getDoctors');

En la vista estos son los select, primero las especialidades, luego los doctores, así:

          <select class="custom-select mb-1" name="specialty_id" id="specialty_id" onchange="getDoctors()">
            <option value="0" selected>Seleccione Especialidad</option>
            @foreach($specialties as $specialty)
              <option value="{{ $specialty->id }}">
                  {{ $specialty->descripcion }}
              </option>
            @endforeach
          </select>
          <select class="custom-select" name="doctor_id" id="doctor_id">
            <option value="0" selected>Seleccione Profesional</option>
            @foreach($doctors as $doctor)
              <option value="{{ $doctor->id }}">
                  {{ $doctor->apeynom }}
              </option>
            @endforeach
          </select>

Y por último, lo primero, como envío los arreglos a la vista al inicio:

$specialties = DB::table('specialties')
                            ->where('vigente', '=', 1)
                            ->orderBy('descripcion','asc')
                            ->get();
$doctors = DB::table('doctors')->where('id', '=', 0)->get();

Tengo un campo para filtrar las especialidades vigentes y ordeno por el nombre de la especialidad, en Doctors empiezo buscando id = 0 para que el arreglo inicie vacío, se llenará cuando seleccione alguna especialidad, espero que te sume algo, saludos!

2
  • Estás llevando al OP de JQuery a JS puro, entonces para que sea enriquecedora la respuesta deberías explicarle tu código
    – user128299
    el 16 jun. 2020 a las 18:27
  • Ok, hace poco he empezado a responder por acá y voy aprendiendo, ahí lo edito, gracias.
    – FabianM
    el 16 jun. 2020 a las 18:35
0
$('#categoria').on('change', function(e){
    console.log(e);
    var categoria = e.target.value;
    
    $.get('select_category/' + categoria,function(data) {
    
    $('#subcategoria').empty();
    
    $.each(data, function(fetch, subCate){
        console.log(data);
        for(i = 0; i < subCate.length; i++){
        $('#subcategoria').append('<option value="'+ subCate[i].sAmigable +'">'+ subCate[i].nombre +'</option>');
        }
    })
 })
});
1

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.