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