Llenar select HTML con MySQL PHP: Ejemplos

¿Cómo poblar un SELECT usando PDO PHP y un buscador dinámico de opciones?

Nestor Tapia 21 mayo, 2023Last Updated: 23 marzo, 2025

50 66.989 5 minutos de lectura

La Llenar select HTML con MySQL PHP. Para llenar un <select> en HTML con datos de una base de datos MySQL utilizando PHP, sigue estos 4 pasos:

Conexión a la base de datos
Consultar los datos de la base de datos
Generar el <select> en HTML
Cerrar la conexión

Tabla de contenidos

1. Conexión a la base de datos con PDO

Primero, debes conectarte a la base de datos utilizando PDO. Aquí te muestro cómo hacerlo:

<?php
$host = 'localhost'; // Servidor de la base de datos
$dbname = 'tu_base_de_datos'; // Nombre de la base de datos
$username = 'tu_usuario'; // Usuario de la base de datos
$password = 'tu_contraseña'; // Contraseña de la base de datos

try {
    // Crear una instancia de PDO para la conexión
    $conn = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
    // Configurar el manejo de errores para que PDO lance excepciones
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    // Manejar errores de conexión
    die("Error de conexión: " . $e->getMessage());
}
?>

2. Consultar los datos de la base de datos

Realiza una consulta SQL para obtener los datos que deseas mostrar en el <select>.

<?php
try {
    // Consulta SQL
    $sql = "SELECT id, nombre FROM tu_tabla";
    // Preparar la consulta
    $stmt = $conn->prepare($sql);
    // Ejecutar la consulta
    $stmt->execute();
    // Obtener los resultados como un array asociativo
    $resultados = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    // Manejar errores de la consulta
    die("Error en la consulta: " . $e->getMessage());
}
?>

3. Generar el `<select>` en HTML

Ahora, genera el <select> en tu HTML y llena las opciones con los datos obtenidos de la base de datos.

<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Select con MySQL y PHP (PDO)</title>
</head>
<body>
    <form>
        <label for="opciones">Selecciona una opción:</label>
        <select name="opciones" id="opciones">
            <?php
            if (count($resultados) > 0) {
                // Recorrer los resultados y crear las opciones
                foreach ($resultados as $fila) {
                    echo "<option value='" . $fila['id'] . "'>" . $fila['nombre'] . "</option>";
                }
            } else {
                echo "<option value=''>No hay opciones disponibles</option>";
            }
            ?>
        </select>
    </form>
</body>
</html>

4. Cerrar la conexión

Aunque PDO cierra la conexión automáticamente cuando el script termina, es una buena práctica cerrarla manualmente.

<?php
// Cerrar la conexión
$conn = null;
?>

Ejemplo completo

<?php
// Conexión a la base de datos con PDO
$host = 'localhost';
$dbname = 'tu_base_de_datos';
$username = 'tu_usuario';
$password = 'tu_contraseña';


try {
    $conn = new PDO("mysql:host=$host;dbname=$dbname", $username, $password);
    $conn->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch (PDOException $e) {
    die("Error de conexión: " . $e->getMessage());
}


// Consulta SQL
try {
    $sql = "SELECT id, nombre FROM tu_tabla";
    $stmt = $conn->prepare($sql);
    $stmt->execute();
    $resultados = $stmt->fetchAll(PDO::FETCH_ASSOC);
} catch (PDOException $e) {
    die("Error en la consulta: " . $e->getMessage());
}
?>


<!DOCTYPE html>
<html lang="es">
<head>
    <meta charset="UTF-8">
    <title>Select con MySQL y PHP (PDO)</title>
</head>
<body>
    <form>
        <label for="opciones">Selecciona una opción:</label>
        <select name="opciones" id="opciones">
            <?php
            if (count($resultados) > 0) {
                foreach ($resultados as $fila) {
                    echo "<option value='" . $fila['id'] . "'>" . $fila['nombre'] . "</option>";
                }
            } else {
                echo "<option value=''>No hay opciones disponibles</option>";
            }
            ?>
        </select>
    </form>
</body>
</html>


<?php
// Cerrar la conexión
$conn = null;
?>

Explicación:

Conexión con PDO: Se utiliza PDO para conectarse a la base de datos de manera segura y eficiente.
Consulta SQL: Se prepara y ejecuta una consulta SQL para obtener los datos.
Generación del <select>: Se recorre el resultado de la consulta y se generan las opciones del <select>.
Cierre de la conexión: Se cierra la conexión a la base de datos para liberar recursos.

Este enfoque es más moderno y seguro que usar mysqli, ya que PDO es compatible con múltiples bases de datos y ofrece una API más consistente. Además, PDO permite el uso de consultas preparadas, lo que ayuda a prevenir inyecciones SQL.

LLenar SELECT usando PDO PHP con una tabla «Paises»

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

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 ;


INSERT INTO `Paises` (`id`, `paises`) VALUES
(1, 'Ecuador'),
(2, 'Chile'),
(3, 'Peru'),
(4, 'Argentina'),
(5, 'Colombia');

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.

Llenar select HTML con MySQL PHP Ejemplos

CONCLUSIÓN: Llenar select HTML

Hemos aprendido a implementar la conexión PDO para mostrar resultados 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.

Además, si están usando Laravel les dejaré un ejemplo completo.

DESCARGA

llenar-select-html-con-mysql-php-ejemplos-completos

Etiquetas