La Llenar select HTML con MySQL PHP: Ejemplos. Si se desea que nuestra página web sea dinámica tenemos que utilizar PHP y MySQL, en este artículo veremos cómo vaciar el contenido de una tabla en base de datos a una etiqueta de tipo lista desplegable (select), haciendo uso de lenguaje de programación y una base de datos Mysql.
Si somos detallistas veremos que en cada paso del bucle while imprimimos una nueva opción de forma dinámica (<option></option>
) dentro de la lista desplegable. De esta manera volcamos la información del gestor de base de datos.
Ver demo
Ver DemoLlenar select HTML con MySQL PHP: Ejemplos
Ahora veamos lo que necesitamos para lograr tal propósito y algunos ejemplos completos para mostrar los registros de una tabla.
a) Primer Paso: Crear una tabla en la base de datos (países)
En el siguiente cuadro les dejare el contenido de la base de datos. En ella está la sentencia para la creación de una tabla y sus respectivos registros.
CREATE TABLE IF NOT EXISTS `paises` ( `id` int(11) NOT NULL auto_increment, `paises` varchar(60) NOT NULL, PRIMARY KEY (`id`) ) ENGINE=MyISAM DEFAULT CHARSET=latin1 AUTO_INCREMENT=6 ; -- -- Volcar la base de datos para la tabla `Paises` -- INSERT INTO `Paises` (`id`, `paises`) VALUES (1, 'Ecuador'), (2, 'Chile'), (3, 'Peru'), (4, 'Argentina'), (5, 'Colombia');
b) Segundo Paso: la conexión con MySQL
A continuación, en una sola línea realizaremos la conexión con la base de datos MySQLi
, usando una variable llamada $mysqli
$mysqli = new mysqli('localhost', 'root', 'root', 'base_datos');
c) Tercer Paso: Vincular con la tabla y extraer datos.
- En este paso vamos a usar MySQLi para realizar la selección de la tabla.
- Usaremos el ciclo WHILE para mostrar la información de la tabla paises.
- Dentro del ciclo WHILE podemos colocar las opciones de nuestra lista desplegable. Por lo tanto, en este ciclo se mostrara la cantidad de registros existentes en nuestra tabla.
$query = $mysqli -> query ("SELECT * FROM paises"); while ($valores = mysqli_fetch_array($query)) { echo '<option value="'.$valores[id].'">'.$valores[paises].'</option>'; }
Aquí les muestro el ejemplo completo, la conexión, el código HTML, y la impresión de datos en una lista desplegable.
<?php $mysqli = new mysqli('localhost', 'demo', 'root', 'Base_datos'); ?> <html> <head> <title>Demo de menú desplegable</title> <meta charset=utf-8" /> </head> <body> <div align="center"> <p>Seleccione un pais del siguiente menú:</p> <p>Paises: <select> <option value="0">Seleccione:</option> <?php $query = $mysqli -> query ("SELECT * FROM paises"); while ($valores = mysqli_fetch_array($query)) { echo '<option value="'.$valores[id].'">'.$valores[paises].'</option>'; } ?> </select> <button>Enviar</button> </p> </div> </body> </html>
LLenar SELECT usando PDO PHP
Usaremos la misma base de datos llamado «países» que tenemos líneas arriba o lo pueden descargar en la parte final del articulo
- Conexión: PDO con MySQL
- Consulta SQL
- Ciclo foreach para mostrar registros
A) PDO conexión con MySQL
Este tipo de conexiones aumenta la seguridad de conexión con PHP y MySQL
$usuario = 'root'; $password = ''; $db = new PDO('mysql:host=localhost;dbname=php_llenarselect', $usuario, $password);
B) La consulta SQL usando PDO
Una vez que nos conectamos a MySQL podemos crear la estructura de la consulta PDO. Por lo tanto, invocaremos a la tabla que tiene los registros para mostrarlo en nuestro select.
$query = $db->prepare("SELECT * FROM paises"); $query->execute(); $data = $query->fetchAll();
C) Usando ciclo foreach
Hay varios ciclos para mostrar resultados, por ejemplo, el ciclo WHILE o FOREACH. Para este ejemplo usaremos foreach.
foreach ($data as $valores): echo '<option value="'.$valores["id"].'">'.$valores["paises"].'</option>'; endforeach;
De esta manera usando un tipo de conexión más sólido. Además, también podemos mostrar resultados en nuestras etiquetas SELECT
Archivo completo del ejemplo en PDO
<html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no"> <meta name="description" content=""> <meta name="author" content=""> <link rel="icon" href="favicon.ico"> <title>Llenar select HTML con MySQL PHP: Ejemplos - BaulPHP</title> <link href="dist/css/bootstrap.min.css" rel="stylesheet"> <link href="assets/sticky-footer-navbar.css" rel="stylesheet"> </head> <body> <header> <nav class="navbar navbar-expand-md navbar-dark fixed-top bg-dark"> <a class="navbar-brand" href="#">BaulPHP</a> <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation"> <span class="navbar-toggler-icon"></span> </button> <div class="collapse navbar-collapse" id="navbarCollapse"> <ul class="navbar-nav mr-auto"> <li class="nav-item active"> <a class="nav-link" href="index.php">Inicio <span class="sr-only">(current)</span></a> </li> </ul> <form class="form-inline mt-2 mt-md-0"> <input class="form-control mr-sm-2" type="text" placeholder="Buscar" aria-label="Search"> <button class="btn btn-outline-success my-2 my-sm-0" type="submit">Busqueda</button> </form> </div> </nav> </header> <div class="container"> <h3 class="mt-5"><a href="" target="_blank">Llenar select HTML con MySQL PHP</a></h3> <hr> <div class="row"> <div class="col-12 col-md-12"> <?php $usuario = 'root'; $password = ''; $db = new PDO('mysql:host=localhost;dbname=php_llenarselect', $usuario, $password); ?> <div align="left"> <p>Seleccione un pais del siguiente menú:</p> <form class="form-inline"> <div class="form-group mb-2"> <label for="staticEmail2">Paises:</label> </div> <div class="form-group mx-sm-3 mb-2"> <label for="paises" class="sr-only">Paises:</label> <select class="form-control" > <option value="">Seleccione:</option> <?php $query = $db->prepare("SELECT * FROM paises"); $query->execute(); $data = $query->fetchAll(); foreach ($data as $valores): echo '<option value="'.$valores["id"].'">'.$valores["paises"].'</option>'; endforeach; ?> </select> </div> <button class="btn btn-primary mb-2">Enviar</button> </form> </div> </div> </div> </div> <footer class="footer"> <div class="container"> <span class="text-muted"> <p>Códigos <a href="" target="_blank">BaulPHP</a></p> </span> </div> </footer> <script src="assets/jquery-1.12.4-jquery.min.js"></script> <script src="dist/js/bootstrap.min.js"></script> </body> </html>
Buscador en SELECT
Si buscan un buscador dentro de in select aquí les dejo un artículo que hablo sobre un buscador en Select usando SELECT2 con PHP, MySQL y PDO
Espero que el ejemplo les sea de utilidad y gracias por visitar mi blog, no se olviden de suscribirse para que reciban en su correo las últimas novedades de PHP.
CONCLUSIÓN: Llenar select HTML
Hemos aprendido a implementar la conexión PDO para mostrar resultaos en una etiqueta SELECT
El uso de etiquetas select es muy usado en el entorno de desarrollo de software web. Por lo tanto, el principal objetivo es que sean dinámicas a la hora de mostrar información.
La aplicación que presentamos es muy sencilla, su curva de implementación en muy fácil de instalar en nuestros sistemas web. Sin embargo, en este artículo mostraremos un ejemplo completo con MySQL.