Pasar data a Select 2 por Ajax
Comprar curso

143. Pasar data a Select 2 por Ajax

En este capítulo, descubre cómo pasar datos a Select 2 por Ajax en Laravel 10. Aprende cómo utilizar la librería de Ajax de Laravel para recuperar datos de la base de datos y cómo pasarlos a Select 2 para crear una lista desplegable dinámica.


1 comentarios

Inicia sesión para comentar

Comentarios:

  • Victor Arana Flores

    Victor Arana Flores hace 6 meses Destacado

    Para pasar datos a Select2 por Ajax en Laravel 10, sigue estos pasos:

    1. Crea una ruta en tu archivo web.php que devuelva los datos que necesitas recuperar. Por ejemplo:
    Route::get('/categorias', 'CategoriaController@obtenerCategorias');

    2. En el controlador correspondiente, define el método obtenerCategorias para recuperar los datos de la base de datos y devolverlos en formato JSON. Por ejemplo:

    public function obtenerCategorias()
    {
       $categorias = Categoria::all();
       return response()->json($categorias);
    }

    3. En la vista donde quieres utilizar Select2, incluye las librerías necesarias. Por ejemplo:

    <link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/css/select2.min.css" rel="stylesheet" />
    <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.13/js/select2.min.js"></script>

    4. Crea un campo de selección y añádele la clase select2. Por ejemplo:

    <select class="select2" name="categoria_id"></select>

    Añade un script para inicializar Select2 y recuperar los datos por Ajax. Por ejemplo:

    <script>
       $(document).ready(function() {
           $('.select2').select2({
               ajax: {
                   url: '/categorias',
                   dataType: 'json',
                   processResults: function(data) {
                       return {
                           results: $.map(data, function(categoria) {
                               return { id: categoria.id, text: categoria.nombre };
                           })
                       };
                   }
               }
           });
       });
    </script>

    Este script inicializa Select2 en el campo de selección, especifica la URL a la que se deben enviar las solicitudes Ajax y define una función processResults para procesar los datos devueltos por el servidor y convertirlos en el formato esperado por Select2.

    Con estos pasos, ya deberías tener un campo de selección de Select2 que recupera datos por Ajax en tu aplicación de Laravel 10.