Llenar select HTML con MySQL PHP: Ejemplos
¿Cómo poblar un SELECT usando PDO PHP y un buscador dinámico de opciones?
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.
Llenar etiqueta select HTML con MySQL PHP
Ahora veamos lo que necesitamos para lograr tal propósito y algunos ejemplos completos para mostrar los registros de una tabla.
-
Primer Paso: Crear una tabla en la base de datos (países)
-
Segundo Paso: la conexión con MySQL
-
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.
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');
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');
$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
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);
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();
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.
Tengo la misma inquietud que Javier.
He tratado de que se actualice dinámicamente el selector cuando ingreso un nuevo dato en mysql, sin embargo, no ha sido posible.
hola amigo, tengo un select en mi formulario, pero cuando voy a editar datos siempre se posiciona en el primero y no en el que tengo en la base de datos seleccionado
Hola davegavi
Tienes que colocar una condicional justo despues del < select >
Por ejemplo en tu lista de la etiqueta select hay por ejemplo de de 1 al 10 y en tu base de datos guardaste el ID 5
A la hora de editar tendrias que armar la condicional
$valor vendria a ser la variable obtenida despues de la consulta SQL y que contiene la lista para poblar la etiqueta SELECT.
Vamos a suponer que $id_lista es la variable almacenada en mysql y lo estamos recuperando para editar (tiene valor 5 por ejemplo)
foreach($valor as row):
// Condicional para marcar un valor en el SELECT
if ($id_lista == $row[«id_select»]){ $seleccion = «selected»;}else{ $seleccion = «»;}
echo «< option value ='$row["id_select"]' $seleccion> $row[«nombre»]< /option> «;
endforeach;
Cuando la condicional es verdadera, es decir identica se marcara con el atributo selected y quedara marcado la opcion 5 por ejemplo
Espero haber ayudado, saludos
Buenas, mi problema es que en vez de ponerme las distintas opciones me las concatena todas en una opción, no logro ver mi error
Revisa el foreach, quizás colocaste mal el ciclo debes hacerlo fuera de la etiqueta option
Como se actualiza el Select sin refrescar la página ya sea automáticamente o por un botón a lado del Select como se hace eso sí registro algo nuevo no aparece en Select y tengo q refrescar
Cono evitó eso y que el Select ya lo cargue
Tengo la misma inquietud. He tratado de que se actualice el selector cuando ingreso un nuevo dato en mysql, sin embargo, no ha sido posible.
Excelente articulo, muchas gracias
hola estimado vi tu información te felicito por la informacion es muy buena.
lo que necesito a lo mejor tu me puedas ayudar.
necesito llenar 2 listado con (Departamento, Provincia y Distro) desde una tabla, ok lo de la tabla no te preocupes.
en mi caso necesito saber si al seleccionar departamento ejm. Lima, en el siguiente listado me salga la provincia y asi con el distrito relacion a ello.
el otro tema es como capturo el codigo de c/u de lo seleccionado, en PHP.
Espero que me puedas ayudar
Hola estimados,
ocupe un campo select y lo cargue como sale en el ejemplo pero, ahora quiero incorporar que al momento de seleccionar el codigo del select, se me cargue en un campo de texto la descripcion de dicho codigo,,,, como se puede hcer
saludos
Buena tarde Nestor, con respecto a tu ejemplo, ahora necesito mostrar algunos campos relacionados con el elemento seleccionado. Es decir, si elijo por ejemplo Perú, en automático me muestre los datos adyacente como población, moneda etc. Solo me resulta usando un botón dentro del formulario pero no quiero hacer uso de dicho elemento.
Hola Néstor…
tengo una pregunta, si la tabla tuviera las siguientes columnas:
id, paises y capital
si yo por ejemplo, escogiera Colombia de la lista del select… cómo podría hacer que en un campo por ejemplo saliera: Bógota.
osea, que según lo que elija en el select, me afectara un campo de mi página.
Espero puedas ayudarme.
si yo e
Hola, muy buen tutorial y explicacion, quisiera saber como seria para poder hacer de obtener datos de una tabla al elegir en el select un nombre, por ejemplo me explico, selecciono en el cuadro de select un nombre «Juan» por ejemplo y que me muestre los datos de Juan que estan en otra tabla en pantalla. me seria de mucha ayuda con eso, gracias
Néstor, gracias por el aporte. Resulta que quiero tomar el ultimo campo de la base (apodo), realizo las modificaciones al caso, pero no me despliega ningún nombre. Podes decirme que puede ser. Gracias
Hola Nestor, tengo un formulario creado en HTML, con PHP y CSS que me anda magnífico y guardo los las datos son ningún problema. El caso es que necesito traer los datos guardados en el mismo formulario pero no se como encajarlo en las mismas casillas, se que con echo o print, pero como le asigno la casilla donde debiera mostrarmelo. Te agradecería mucho la ayuda.
Hola Victor,
Para traer los datos en el formulario, tendrías que obtener el ID del registro para poder devolver los datos en el formulario.
Aqui te dejo un enlace con un ejemplo:
https://www.baulphp.com/editar-registros-con-funcion-php-y-mysql-ejemplos/
Veo que hablas de casillas (checkbox) en ese caso, depende como has guardado esa casilla en la base de datos.
Luego haces una condicional:
<?php if($checkbox)!=""){ // esta variable es extraída de BD a través de una consulta $check="checked"; }else{ $check=""; } ?>Con esto lograremos que las casillas devuelvan marcadas en el formulario.
o caso contrario, si almacenaste un valor en las casillas, para devolverlo seria asi
Con esto lograremos devolver un valor en el atributo VALUE de la casilla
Espero haberte ayudado y no dudes en volver a escribir ante cualquier inquietud.
Necesito un ejemplo así pero con python utilizando Framework Flask, me podría ayudar? … muchas gracias
Hola, necesito un ejemplo así pero con python utilizando el Framework Flask… Podría ayudarme ? muchas gracias
Hola, pasa que quiero tomar el valor de «precio_garrafon», (que es el que se muestra en el option) para hacer un cálculo aritmético, pero me es imposible puesto que el valor que toma es el de «id_garrafon» y también necesito tomar ese valor. Así que no lo puedo quitar de value. Si pudieras resolverme esta duda, lo agradecería mucho.
Precio del garrafon:
<?php
$result1=mysqli_query($conn, "select * from garrafon");
while ($row1 = mysqli_fetch_array($result1)) {
echo '’.$row1[«precio_garrafon»].»;
}
?>
Precio del garrafon:
<?php
$result1=mysqli_query($conn, "select * from garrafon");
while ($row1 = mysqli_fetch_array($result1)) {
echo '’.$row1[«precio_garrafon»].»;
}
?>
Hola FLOR DEL CARMEN
Ya entendi su consulta, en este caso necesitas pasar los dos valores para procesarlos.
Lo que podria hacer es hacer pasar en el value el ($row1[“id_garrafon”]) y en el fichero de procesamiento puedes realizar una consulta SQL con ese ID para devolver el precio. Con este procedimiento obtendras tanto el id_garrafon y el precio_garrafon.
Ya de esta manera podras realizar las operaciones artmeticas que deseas.
Un saludo
Después de darle muchas vueltas no logro que me funcione. Me sale siempre esto:
‘.$valores[paises].’
Hola Miguel,
Al parecer no estas imprimiendo el select, debes usar (echo o print), es por tal motivo te sale ese error.
Por favor, envíame el codigo completo para analizarlo.
Demo de menú desplegable
Seleccione un pais del siguiente menú:
Paises:
Seleccione:
query («SELECT * FROM paises»);
while ($valores = mysqli_fetch_array($query)) {
echo ».$valores[paises].»;
}
?>
Enviar
Hola Miguel
El codigo tiene que quedar así.
La conexión con MySQLi:
$mysqli = new mysqli('localhost', 'root', 'root', 'php_llenarselect');La consulta SQL para extraer la información de la BD:
< select class="form-control" > query ("SELECT * FROM paises"); while ($valores = mysqli_fetch_array($query)) { echo ''; } ?>La base de datos:
Saludos Cordiales.
si quiero que un vez que haya submit y por que falte un campo por llenar y se pueda registrar, que en el select quede seleccionado, para no volver a realizar la selección y así poder guardar el registro.
Me puedes ayudar, por favor
Saludos Robert,
Puedes validar tu formulario antes de enviar por el metodo post o get usando el atributo «required» del HTML5. Con esta opcion si te olvidas de seleccionar un select, automaticamente emitira un mensaje de error.
Hola amigo, tengo una duda respecto al select, te pongo en contexto.
tengo dos tablas las cuales están relacionadas por ejemplo (tabla usuario) y (tabla tipo de usuario) ya logre agregar usuarios y mostrarlos en pantalla incluso puedo actualizar usuarios pero hay un campo de select donde se escoge el tipo de usuario y no mantiene el que ya tiene dicho usuario seleccionado, ejemplo
martin martin@info.es administrador
sandra sandra@info.es recepcionista
si le doy en el boton de editar en el usuario sandra me carga los datos de ses usuario pero el select me muestra el primer valor de ese select mas no el tipo de usuario del usuario seleccionado te agradezco si me puedes ayudar
Saludos Joanni
Al editar los registros y deseas que muestre el registro de la base de datos y debajo la lista de opciones del select, puedes apoyarte en una consulta extra.
Espero haber solucionado tu duda, saludos
Gracias por tu aporte,
tengo una pregunta en este caso el select mostró los países.
cuando seleccionamos el país para ingresarlo ala base de datos se ingresa como el ID o com Texto «El nombre del país seleccionado» ?
Saludos Elio,
Ingresa con «El nombre del país seleccionado», pero si deseas el id y nombre lo puedes hacer usando JavaScript o jQuery donde te permite enviar el valor tanto del ID como del nombre que aparece en el select y lo envía a varios input para almacenarlo en la base de datos.
HOLA AMIGO MUCHAS ME SIRVIO BASTANTE PERO ME GUSTARIA QUE ME AYUDARAS CON ALGO MAS
YO TENGO UN BOTON BUSCAR CUANDO INGRESO ALGUN VALOR Y DOY CLIC EN EL BOTON BUSCAR ME BUSCA TODOS LOS DATOS Y LOS PRESENTA, PERO EN EL SELECT NO LO PRESENTA NO CAMBIA SIGUE SALIENDO SELECCIONE COMO PUEDO HACER PARA QUE PRESENTE EL VALOR QUE ESTA GUARDA EN LA BASE
Saludos Carlos
No te entendí bien la pregunta. Pero, te responderé lo que entendí, para que muestre la información al ejecutar el botón buscar puedes apoyarte del método del formulario, puede ser GET o POST según la declaración de tu formulario.
Espero que te sirva, saludos.
Ante cualquier duda, escríbeme por este medio.
Se pueden hacer varios select que muestren datos de una tabla pero que guarden en otra?
Hola Manuel,
Si, justamente en este post tocamos este tema, te lo dejo a continuación. Aquí se pueden generar contenidos para cada select y realizar un consolidado.
https://www.baulphp.com/combobox-3-niveles-continente-pais-y-ciudad-php-y-mysql/
Muy buen aporte me pase buen rato buscando esto
Hola, estoy intentando hacerlo pero bajo la celda select me aparece el otro item, es decir, hace la consulta y sin embargo solo en la lista desplegable me muestra el primer resultado, el segundo aparece bajo este y fuera de la lista desplegable. Lo hice tal cual lo señalas
Seleccione:
query («SELECT * FROM recordings»);
while ($valores = mysqli_fetch_array($query)){
echo ».$valores[displayname].’;
}
?>
Muy buen blog (y)
Hola BaulPHP 🙂
Estoy trabajando en un modal en el cual tengo dos , uno depende del otro (como la relación país-ciudad). El independiente funciona bien, pero en el dependiente aún no carga información. ¿Cómo podría hacer?
Perfecto y sin tanto rollo, funciona de 10 se agradece el tutorial
y la manera de exponer los conocimientos.
Un placer Ignacio,
Gracias por comentar y dar su apreciación!
y si lo que necesito o quiero, es llenar con bases de datos disponibles , o tablas de una base de datos.?
Si, lo puedes hacer siempre y cuando cambies el nombre de la base de datos existente y el nombre de la tabla, tambien puedes cambiarle las columnas para que se adecuen a tus necesidades!!
Saludos, Francisco
De las decenas de tutoriales de +30 minutos que vi….este fue el mas simple, fácil y efectivo que encontré. Felicidades es justamente lo que necesitaba ni más ni menos.
Gracias por su comentario, justamente esto nos alienta a seguir adelante.
Que tenga un buen dia!!
no me muestra el select la base de datos es tiene id_mutas, Tipo_multa, Cosot_multa
——–
<?php
$sql =mysqli_query($con,"SELECT * FROM `multas`");
while ($row = mysqli_fetch_array($sql)) {
if ($row['Id_multas']==$Id_multas) {
echo '’.$row[‘Tipo_Multa’].»;
}}
?>
Deberia de salir los datos, revise la conexiòn con el servidor Mysql, la consulta. Por lo que veo en el código que muestra, observo dos etiquetas de cierre tipo select.
Caso contrario envie por este medio mas código para realizar un analisis mas profundo de su error.
Muy gustoso de responderle.
Tienes que revisar el ciclo y la conexión sean correctos, Saludos!
Procura que el nombre de la conexion sea la misma que en la query que introduces en la seccion php.
Por ejemplo si tu conexion a la bd es:
$nombre_conexion = mysqli_connect($hostname_db, $username_db, $password_db);
En la seccion php debe ir:
query («SELECT * FROM tabla_de_tu_bd»);
while ($valores = mysqli_fetch_array($query)) {
echo ».$valores[lo_que_quieres_mostrar].»;
}
?>
amigo no me muestra la lista despegable
——–
<?php
$sql =mysqli_query($con,"SELECT * FROM `multas`");
while ($row = mysqli_fetch_array($sql)) {
if ($row['Id_multas']==$Id_multas) {
echo '’.$row[‘Tipo_Multa’].»;
}}
?>