Aprende en casa Ir a KODOTI
Aprende en casa KODOTI

Llenar un select mediante ajax con PHP y jQuery usando JSON

Vamos a ver como poblar un select vecino mediante ajax usando jQuery y convirtiendo nuestro resultado a json con PHP.

Rodríguez Patiño, Eduardo
Rodríguez Patiño, Eduardo
2020-07-07 | 51,281 lecturas

Señores, seguimos con los tutoriales y ahora vamos a ver como poblar un SELECT vecino usando jQuery.

La lógica es bien simple, tenemos nuestro SELECT de alumnos y lo que queremos hacer que al seleccionar una opción de este nos liste en el SELECT de al lado los cursos que tiene asignado dicho alumno.

Para esto hemos usado PDO para hacer la consulta a la base de datos y tenemos 3 tablas, las cuales son:

  • alumnos: contiene a todos nuestros alumnos

  • alumno_curso: contiene la relación entre alumnos y cursos, de esta manera sabemos que cursos tiene asignado un alumno.

  • cursos: contiene todo los cursos

Hemos usado la arquitectura del ejemplo Crud avanzando con MVC para PHP, por lo tanto tenemos nuestro controlador alumno que contiene una acción llamada  CursosPorAlumno, la cual retorna dicha relación entre alumno y curso convirtiendolo en JSON.

Image title

Como pueden ver, este esta llamado a una variable llamada curso_model, la cual invoca al método ListarCursosDeAlumno, y recibe un parámetro el cual es el id del alumno. Este retorna un ARRAY con la información de la base de datos, y luego le hacemos un json_encode que se encarga de convertirlo a formato json.

No se asusten, al final del ejemplo pueden descargar el material para que lo estudien y entiendan más de donde proviene este y el otro.

Ahora nos vamos a nuestro modelo Curso, el cual contiene la consulta a la base de datos

Image title

Quiero aclarar ciertas cosas:

  • Si trabajamos con PDO, usemos la opción PDO::FETCH_ASSOC de esta manera retornamos un array y nuestro json_encode lo podrá interpretar sin problema

  • Cuidado con las TILDES y Ñ, nuestro json_encode no lo acepta. Podemos dar solución esto, dando un utf8_encode a los campos que contenga dichos caracteres.

Ahora nos vamos a nuestra vista, la cual en nuestro Controlador AlumnoController, la acción INDEX se encarga de cargar esta vista, aparte le estamos enviando todos los alumnos ya que nuestro SELECT de alumnos es cargado por defecto.

Image title

Nuestro archivo view/alumno/index.php

<div class="page-header">
    <h1>Alumnos</h1>
</div>

<div class="row">
    <div class="col-xs-6">
        <div class="form-group">
            <label>Alumnos</label>
            <select id="slt-alumnos" class="form-control">
                <option value="" selected>Seleccione un alumno</option>
                <?php foreach($alumnos as $a): ?>
                    <option value="<?php echo $a->id; ?>"><?php echo $a->Nombre; ?></option>
                <?php endforeach; ?>
            </select>
        </div>        
    </div>
    <div class="col-xs-6">
        <div class="form-group">
            <label>Cursos asignados</label>
            <select id="slt-cursos" class="form-control"></select>
        </div>        
    </div>
</div>
  • Como pueden notar tenemos 2 SELECT en HTML, y le hemos asignado un id a cada uno.

  • En el select de alumnos estamos haciendo un foreach para pintar la data de todos los alumnos

Ahora nuestro código jquery se resumen a lo siguiente:

$(document).ready(function(){
    // Bloqueamos el SELECT de los cursos
    $("#slt-cursos").prop('disabled', true);

    // Hacemos la lógica que cuando nuestro SELECT cambia de valor haga algo
    $("#slt-alumnos").change(function(){
        // Guardamos el select de cursos
        var cursos = $("#slt-cursos");

        // Guardamos el select de alumnos
        var alumnos = $(this);

        if($(this).val() != '')
        {
            $.ajax({
                data: { id : alumnos.val() },
                url:   '?c=Alumno&a=CursosPorAlumno',
                type:  'POST',
                dataType: 'json',
                beforeSend: function () 
                {
                    alumnos.prop('disabled', true);
                },
                success:  function (r) 
                {
                    alumnos.prop('disabled', false);

                    // Limpiamos el select
                    cursos.find('option').remove();

                    $(r).each(function(i, v){ // indice, valor
                        cursos.append('<option value="' + v.id + '">' + v.Nombre + '</option>');
                    })

                    cursos.prop('disabled', false);
                },
                error: function()
                {
                    alert('Ocurrio un error en el servidor ..');
                    alumnos.prop('disabled', false);
                }
            });
        }
        else
        {
            cursos.find('option').remove();
            cursos.prop('disabled', true);
        }
    })
})
  • Usamos $.ajax para el manejo de ajax, ya lo he configurado como se debe usar.

  • Siempre recuerden bloquear el select, la pantalla lo que sea mientras la ejecución ajax esta en curso. De esta manera evitamos que se ejecuten miles de acciones y aparte el usuario entendera que debe esperar. El bloqueo lo hacemos en el beforeSend de nuestro $.ajax.

  • Hacemos una pequeña validación, por defecto nuestro SELECT de alumnos tiene una opción que dice "Seleccione un alumno", si esta ha sido seleccionada no hace nada y pasa al ELSE.

  • Nuestro succes del $.ajax, entra acción al finalizar la consulta y no ha ocurrido ningun error. Ahí lo que hacemos es recorrer el json usando $.each

De esta manera poblamos el SELECT vecino de cursos, pueden descargar el material adjunto en la parte inferior. Si hubieran dudas, puedes dejar un comentario.


Estudia con nosotros

🚀 Mejora tus oportunidades laborales