Select dinámicos en Laravel solo con JS

Select Dependientes en Laravel

CRUD ¿Cómo Mostrar Registros en Laravel usando Blade?

¿Cómo crear select dinámicos en Laravel de tres niveles con JS?

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

¿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>

Talvez tiene el código fuente para descargar

Ver Código Fuente

Redactado por: , Leido 12578 veces

Compartir enlace del tutorial

Link Whatsapp Messenger Facebook Twitter

Aprende más sobre LARAVEL

1 Reducir el tamaño de una imagen en Laravel 2 Controlar errores 404 3 Actualizar valores incremento o disminución 4 Cómo Generar JSON desde Laravel 5 Instalación de Laravel 6 Instalación del SDK de Facebook 7 Login con el SDK de Facebook 8 Publicar un post en una página de Facebook 9 Extraer registros con la fecha actual 10 Generador de palabras únicas 11 Mostrar el registro Next y Prev en Laravel 12 Scroll Infinito en Laravel con Javascript Fetch 13 Buscador en tiempo real en Laravel y Javascript 14 Crear urls amigables 15 Un sistema de Tags en Laravel más fácil 16 Cómo subir imágenes en Laravel 17 Carrito de Compra Laravel 18 Consultas Avanzados con tres tablas 19 Crear un CRUD en Laravel 8 20 CRUD ¿Cómo Mostrar Registros en Laravel usando Blade? 21 Select dinámicos en Laravel solo con JS 22 Cómo subir un PDF con Laravel 8 23 Forzar https en Laravel 8 usando un Middleware 24 ViewComposer y Provider en Laravel 25 Exportar un lista TXT a Mysql 26 Subir Laravel a un Hosting compartido. 27 Ejecutar migraciones en Laravel 28 Lazy load vs. Eager-loading 29 Migraciones en Laravel 30 Semillas en Laravel 31 CRUD para un proyecto API 32 Refresh vs. Fresh 33 Tipos de controladores 34 consultas SQL crudas 35 Validaciones API: teoría 36 Validaciones API: práctica 37 Notificaciones en Real Time en Laravel 38 Generar datos de prueba en Laravel