Llenar SELECT con jQuery: Ejemplo completo

Llenar SELECT con jQuery

Llenar SELECT con jQuery. A veces se requiere rellenar dinámicamente los datos de una etiqueta SELECT en función de la selección de otro elemento, por ejemplo, los nombres de las ciudades en función de un estado.

Puede hacer esto solo con PHP, pero requiere que lo envíe cada vez que lo seleccione la etiqueta SELECT.

Esta interacción resuelve el problema, pero es un poco frustrante porque se envía cada vez, incluso si la selección es correcta o incorrecta.

Índice

    ¿Cuál es la solución para llenar SELECT con jQuery?

    Para mejorarlo, puede usar AJAX con jQuery que carga nuevos datos y elimina los antiguos en cada selección.

    En este artículo estamos creando una lista desplegable de departamentos y, en función de la selección de opciones, muestro todos los usuarios existentes de ese departamento en otro menú desplegable.

    ¿Qué recursos usaremos para esta integración dinámica?

    Usaremos las siguientes opciones

    • Lenguaje PHP
    • jQuery y Ajax
    • Base de datos MySQL
    • HTML5

    Ejemplo 01: Departamentos y usuarios

    A continuación, veremos un ejemplo para poblar datos dinámicos en un SELECT haciendo uso de AJAX

    Estructura de la tabla

    Usaremos 2 tablas en este ejemplo:

    Tabla de departamentos

    Consta de una tabla y dos campos, Uno para el ID y el otro de nombre depart_name. Sin embargo, se recomienda que la tabla tenga la opción de autoincremento automático en el ID.

    Tabla Usuarios

    Contendrá 5 campos para este ejemplo. Además, su ID será de auto incremento dinámico

    CREATE TABLE `department` (
    `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
    `depart_name` varchar(80) NOT NULL
    ) ENGINE=InnoDB DEFAULT CHARSET=latin1;
    
    CREATE TABLE `users` (
    `id` int(11) NOT NULL PRIMARY KEY AUTO_INCREMENT,
    `username` varchar(80) NOT NULL,
    `name` varchar(80) NOT NULL,
    `email` varchar(80) NOT NULL,
    `department` int(11) NOT NULL
    ) ENGINE=InnoDB DEFAULT CHARSET=latin1;

    Configuración del script

    Tenemos que crear un archivo una config.php para definir la conexión de base de datos.

    Relacionado  Mostrar errores PHP: Ejemplo Completo

    Código completo

    <?php
    $host = "localhost"; /* Host name */
    $user = "root"; /* User */
    $password = ""; /* Password */
    $dbname = "baul_select"; /* Database name */
    $con = mysqli_connect($host, $user, $password,$dbname);
    // Revisamos la conexión
    if (!$con) {
    die("Connection failed: " . mysqli_connect_error());
    }

    Contenido HTML

    Creación de dos elementos desplegables

    Buscar registros de la tabla de departamentos y usarlos para agregar <option> <seleccione id='sel_depart'> y Otro menú desplegable muestra los nombres de los usuarios que se rellenan con jQuery en función de la selección del nombre del departamento desde el primer elemento desplegable.

    Código completo

    <?php
    include "config.php";
    ?>
    <!doctype html>
    <html>
    <head>
    <title>Llenar SELECT con jQuery: Ejemplo completo</title>
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.0.0/dist/css/bootstrap.min.css">
    <script type="text/javascript">
    $(document).ready(function(){
    
    $("#sel_depart").change(function(){
    var deptid = $(this).val();
    
    $.ajax({
    url: 'getUsers.php',
    type: 'post',
    data: {depart:deptid},
    dataType: 'json',
    success:function(response){
    
    var len = response.length;
    
    $("#sel_user").empty();
    for( var i = 0; i<len; i++){
    var id = response[i]['id'];
    var name = response[i]['name'];
    
    $("#sel_user").append("<option value='"+id+"'>"+name+"</option>");
    
    }
    }
    });
    });
    
    });
    </script>
    </head>
    <body>
    <div class="container">
    <div class="card">
    <div class="card-header text-white" style="background-color: #00AA9E;">Llenar SELECT con jQuery: Ejemplo completo </div>
    <div class="card-body" style=" border:1px solid #00AA9E">
    <div>Departamentos </div>
    <select class="form-control" id="sel_depart">
    <option value="0">- Seleccione -</option>
    <?php
    // llamamos a los registros
    $sql_department = "SELECT * FROM department";
    $department_data = mysqli_query($con,$sql_department);
    while($row = mysqli_fetch_assoc($department_data) ){
    $departid = $row['id'];
    $depart_name = $row['depart_name'];
    
    // Opciones con registros
    echo "<option value='".$departid."' >".$depart_name."</option>";
    }
    ?>
    </select>
    <div class="clear"></div>
    <hr>
    <div>Usuarios </div>
    <select class="form-control" id="sel_user">
    <option value="0">- Seleccione -</option>
    </select>
    </div>
    </div>
    </div>
    </body>
    </html>

    Archivo de consulta SQL

    Utilizaremos un archivo llamado getUsers.php para manejar las solicitudes AJAX y consultas hacia MySQL donde tenemos los registros almacenados. Sin embargo, este archivo debe de contener la conexión hacia MySQL.

    Relacionado  Editor TinyMCE usando PHP & MySQL: Ejemplo completo

    Si la consulta es exitosa obtendremos la lista de usuarios en función de la selección de departamentos de la tabla de usuarios.

    • Inicialice $users_arr Array con userid y name.
    • Devuelve $users_arr Array en formato JSON.

    Código completo

    <?php
    
    include "config.php";
    
    $departid = 0;
    
    if(isset($_POST['depart'])){
    $departid = mysqli_real_escape_string($con,$_POST['depart']); // department id
    }
    
    $users_arr = array();
    
    if($departid > 0){
    $sql = "SELECT id,name FROM users WHERE department=".$departid;
    
    $result = mysqli_query($con,$sql);
    
    while( $row = mysqli_fetch_array($result) ){
    $userid = $row['id'];
    $name = $row['name'];
    
    $users_arr[] = array("id" => $userid, "name" => $name);
    }
    }
    // encoding array to json format
    echo json_encode($users_arr);

    Código jQuery Ajax

    Estas líneas de código envían la solicitud AJAX cuando se selecciona una opción del primer menú desplegable. Pase el valor de opción seleccionado como datos y, al rellenar correctamente la devolución de llamada, <select id='sel_user'> con una respuesta desde MySQL.

    Código completo

    
    $(document).ready(function(){
    
        $("#sel_depart").change(function(){
            var deptid = $(this).val();
    
            $.ajax({
                url: 'getUsers.php',
                type: 'post',
                data: {depart:deptid},
                dataType: 'json',
                success:function(response){
    
                    var len = response.length;
    
                    $("#sel_user").empty();
                    for( var i = 0; i<len; i++){
                        var id = response[i]['id'];
                        var name = response[i]['name'];
                        
                        $("#sel_user").append(""+name+"");
    
                    }
                }
            });
        });
    
    });
    

    ¿Cómo rellenar una lista de selección con jQuery?

    Para no saturar nuestro servidor web se requiere de interacción como AJAX. Por lo tanto, vamos a crear un ejemplo para cargar un SELECT de manera dinámica.

    Ejemplo 02: Rellenar una lista desplegable

    Para rellenar la lista de selección con jQuery, utilice el ciclo for junto con el método append() y agregue las opciones a la selección.

    Por ejemplo vamos a suponer que tenemos la siguiente selección con opciones

    <select id="customerNameList" name="customer">
    <option value="John">John</option>
    <option value="David">David</option>
    </select>

    Interacción jQuery en el script

    A continuación se muestra el código para anexar más número de opciones usando el metodo append()

    <!DOCTYPE html>
    <html lang="en">
    <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    </head>
    <link rel="stylesheet" href="//code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
    <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
    <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
    <body>
    <select id="customerNameList" name="customer">
    <option value="John">John</option>
    <option value="David">David</option>
    </select>
    </body>
    <script>
    $(document).ready(function () {
    var data = [
    { "name": "Bob", "customerName": "Bob" },
    { "name": "Mike", "customerName": "Mike" }
    ];
    for (var index = 0; index <= data.length; index++) {
    $('#customerNameList').append('<option value="' + data[index].name + '">' + data[index].customerName + '</option>');
    }
    });
    </script>
    </html>

    Para ejecutar el script anterior, guarde el nombre de archivo mi_nombre.html o (index.html). Para visualizar el script puede probarlo en un servidor local como XAMP, Laragon, etc o en un servidor de producción.

    Relacionado  Registro de usuarios usando asistente PHP MySQLi

    Conclusión

    En este articulo hemos utilizado una lista desplegable (SELECT) para autocompletar, pero se puede hacer con cualquier otro elemento como TextBox, Textarea, etc.

    Hemos aprendido a usar Ajax para requerir información desde la base de datos MySQL o MariaDB.

    Para manejar una interfaz profesional hemos usado el Framework Bootstrap 4

    Con referencia a la conexión a MySQL hemos suado mysqli_connect, pero se puede hacer también con PDO sin problemas.

    Puede ver este tutorial para saber cómo rellenar automáticamente el menú desplegable con PDO y PHP.

    Nestor Tapia

    Bloggero, amante de la programación PHP, innovador y me fascina compartir información. Desde que conocí el entorno informatico y el internet me llamó la atención la programación, Por tal motivo he creado mi blog BAULPHP.COM para compartir mis experiencias con todos ustedes. ¡Gracias por leerme!.

    Entradas Relacionadas

    Deja una respuesta

    Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *

    Subir