Inicio » Blog » Laravel

2 diciembre, 2020

Select dinámicos en Laravel solo con JS

Para implementar select dependientes en Laravel necesitamos tres modelos, la API nativa Fetch de Javascript para realizar la peticiones mediante promesas.

Ver video en

Suscríbete a nuestro canal en Youtube

Suscríbirse

¿Cómo implementar select dependientes en Laravel?

En este caso programaremos un ejemplo de Selects dependientes de tres niveles con la API Fetch de JS y Laravel. Para ello, antes se usaba comunmente Jquery, hoy en dia contamos con una solución nativa que requiere de menos líneas de código y la mayoría de navegadores modernos ya lo soportan. Entonces:

  • Solo usaremos Javascript donde vamos a consumir la API Fetch para inflar los select dinámicamente.
  • El framework Laravel  - PHP para el desarrollo de aplicaciones web
  • HTML y CSS para maquetar es decir aplicar diseño a la vista.

¿Pasos para implementar una aplicación con select dinámicos en PHP?

Inicialmente; vamos a usar un proyecto en Laravel 8, debidamente instalado, con la conexión a la base de datos correctamente sobre XAMPP y VisuAL Studio Code y un navegador para ver lo resultados. Veamos entonces :

Los modelos o tablas

Tres tablas debidamente relacionadas, aunque no vayamos a emplear la relaciones para este tutorial.

  • Categorias
  • Subcategorias
  • Empresas

Las rutas

En el archivo routes/web.php

<?php

use Illuminate\Support\Facades\Route;

Route::get('/pruebas',          [App\Http\Controllers\PruebasController::class, 'index']);
Route::post('/subcategorias',          [App\Http\Controllers\PruebasController::class, 'subcategorias']);
Route::post('/empresas',          [App\Http\Controllers\PruebasController::class, 'empresas']);

Los métodos  en el controlador

Instaciamos los modelos y los métodos y consultas para extraer registros de acuerdo a cada petición http. Veamos el código:

<?php

namespace App\Http\Controllers;

use Illuminate\Http\Request;
use App\Models\Categoria;
use App\Models\Subcategoria;
use App\Models\Empresa;

class PruebasController extends Controller
{
    public function index(){
        $categorias = Categoria::all();
        return view("welcome",compact("categorias"));

    }

    public function subcategorias(Request $request){
        if(isset($request->texto)){
            $subcategorias = Subcategoria::whereCategoria_id($request->texto)->get();
            return response()->json(
                [
                    'lista' => $subcategorias,
                    'success' => true
                ]
                );
        }else{
            return response()->json(
                [
                    'success' => false
                ]
                );

        }

    }
    
    public function empresas(Request $request){
        if(isset($request->texto)){
            $empresas = Empresa::whereSubcategoria_id($request->texto)->get();
            return response()->json(
                [
                    'lista' => $empresas,
                    'success' => true
                ]
                );
        }else{
            return response()->json(
                [
                    'success' => false
                ]
                );

        }

    }
}

Finalmente las vistas

En la única vista codeamos html básico con los respectivos select html para cada modelo identificados con su id correspondiente.

Implementamos la API fetch para cada evento change del select de categorias y subcategorias. Veamos el código html y javascript.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <meta name="csrf-token" content="{{ csrf_token() }}">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>SELECT DEPENDIENTES DE TRES NIVELES</title>
</head>
<body>
    <div>
        <select name="" id="_categoria">
            @foreach ($categorias as $item)
            <option value="{{$item->id}}">{{$item->nombre}}</option>
            @endforeach
        </select>
        <select name="" id="_subcategoria"></select>
        <select name="" id="_empresa"></select>
    </div>
<script>
    const csrfToken = document.head.querySelector("[name~=csrf-token][content]").content;
    document.getElementById('_categoria').addEventListener('change',(e)=>{
        fetch('subcategorias',{
            method : 'POST',
            body: JSON.stringify({texto : e.target.value}),
            headers:{
                'Content-Type': 'application/json',
                "X-CSRF-Token": csrfToken
            }
        }).then(response =>{
            return response.json()
        }).then( data =>{
            var opciones ="<option value=''>Elegir</option>";
            for (let i in data.lista) {
               opciones+= '<option value="'+data.lista[i].id+'">'+data.lista[i].nombre+'</option>';
            }
            document.getElementById("_subcategoria").innerHTML = opciones;
        }).catch(error =>console.error(error));
    })

    document.getElementById('_subcategoria').addEventListener('change',(e)=>{
        fetch('empresas',{
            method : 'POST',
            body: JSON.stringify({texto : e.target.value}),
            headers:{
                'Content-Type': 'application/json',
                "X-CSRF-Token": csrfToken
            }
        }).then(response =>{
            return response.json()
        }).then( data =>{
            var opciones ="<option value=''>Elegir</option>";
            for (let i in data.lista) {
               opciones+= '<option value="'+data.lista[i].id+'">'+data.lista[i].nombre+'</option>';
            }
            document.getElementById("_empresa").innerHTML = opciones;
        }).catch(error =>console.error(error));
    })

</script>   
</body>
</html>

 

 

 


Leido 15468 veces

Descarga el código fuente Laravel

Recurso descargado 87 veces

USD

Descargar Código Fuente

Compartir link del tutorial con tus amigos


Laravel 9 Página Web para Negocio Laravel 9 Página Web para Negocio

Curso Laravel 9 Avanzado Desarrollo Web Administrable para negocio

Descarga del código fuente

USD 33.00

ReactJS y Laravel Directorio de Empresas ReactJS y Laravel Directorio de Empresas

Curso ReactJS y Laravel desarrollo fullstack directorio empresarial

Descarga del código fuente

USD 47.00

Aprende más sobre Laravel

Cursos de programación

Codea Codea App

México, Colombia, España, Venezuela, Argentina, Bolivia, Perú

© Todos los derechos reservados Codea App | ...de frente al código!!! | 2020 - 2023