Selects Anidados con AJAX yJQuery

Hay Ocaciones en que tenemos inputs de tipo select con listas interminables de elementos y muchas veces no es necesario desplegar la lista completa.

como ejemplo tomemos el de productos y categorías, usando este ejemplo podríamos decir que tenemos 1.000 productos, y estos productos se dividen en 10 categorías.

para evitar estar desplegando los 1.000 productos (lo cual seria una tortura para el usuario al momento de buscar el producto que desea), usaremos un par de selects anidados con ajax, con lo cual solo se me mostraran los productos asociados a la categoría que seleccionamos, bajando de esta forma la cantidad de resultados en nuestro select.

Para este ejemplo necesitamos como mínimo que en nuestra tabla productos tengamos el id de la categoría por cada producto, y si tenemos las tablas relacionadas aun mejor.

lo primero que necesitamos en este caso son los selects. para esto nos vamos a nuestra pagina html y los añadimos

"col-md-3">
   for="" class="control-label">Seleccione Categoria
      "categorias" id="categorias" class="form-control">
         <optionvalue="">Seleccioneoption>
         @foreach ($categorias as $categoria)
            <optionvalue="{{$categoria->id}}">{{$categoria->nombre}}option>
         @endforeach

//
"col-md-3">
   for="" class="control-label">Seleccione Producto
      "productos" id="productos" class="form-control">
           <optionvalue="">Seleccione Campañaoption>

Bueno según como vemos en el código tenemos que pasarle las categorías a nuestro primer select y recorrerlas con un foreach. como eso ya lo vimos en el curso no aremos inca pie en ello.

lo sieguiene es crear nuestra petición Ajax desde javascript con Jquery
esta se ejecutara con el evento change de jquery, lo cual lanzara la petición get cada vez que se realice un cambio en el estado del select categoria

<script>
  $(document).ready(function(){
    $("#categorias").change(function(){
      var categoria = $(this).val();
      $.get('productByCategory/'+categoria, function(data){
//esta ella peticion get, la cual se divide en tres partes. ruta,variables y funcion
        console.log(data);
          var producto_select = 'Seleccione Porducto'for (var i=0; i''">'+data[i].nombre_producto+'';

            $("#campanas").html(producto_select);

      });
    });
  });
script>

la petición get que realizamos mediante jqery se compone de tres partes, la primera es la ruta a la cual le hacemos la petición, la segunda es la variable o la data que le enviamos , y por ultimo una función que se encarga de procesar el resultado de la petición

Para este ejemplo pasamos la variable como parámetro de la ruta, pero podríamos pasarle variables, o incluso un objeto serializado con muchas variables

luego de esto nos queda crear la ruta que nos llevara a nuestro controlador, para esto nos vamos a nuestro controlador y agregamos una ruta de tipo get

Route::Get('productByCategory/{id}', 'ProductosController@byCategory');
//como pasamos la variable correspondiente al id de la categoría como parámetro en la url en la ruta lo recibimos como parámetro

finalmente nos queda agregar la lógica en nuestro controlado para que nos retorne los productos de la categorías.
y para esto en nuestro ProductosController añadimos el método byCategory que definimos en la ruta

public function byCategory($id){
	return Productos::where('categoria','=',$id)->get();
}

para esta parte usamos una consulta de eloquent que nos retorna los productos que pertenezcan a una categoría, y para esto como les mencionaba al comienzo tenemos que tener un campo correspondiente a la categoría en la tabla productos, de esta forma guardamos los productos con sus respectivas categorías para poder realizar consultas como esta.
Aunque no es obligación para este caso, no estaría demás tener los modelos de productos y categorías con una relación hasMany de categoría a productos y belongsTo de productos a categoría.

Bueno sin mas espero que este corto tutorial le sea de ayuda

Saludos