Portada » Lenguaje PHP » Llenar select HTML con MySQL PHP: Ejemplos

Llenar select HTML con MySQL PHP: Ejemplos

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 Demo

Llenar 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

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

Buscador en SELECT
Buscador en SELECT

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
Llenar select HTML con MySQL PHP Ejemplos

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.

DESCARGA

Ver Demo Descargar Código Fuente

¿De cuánta utilidad te ha parecido este contenido?

¡Haz clic en una estrella para puntuarlo!

Promedio de puntuación 5 / 5. Recuento de votos: 7

Hasta ahora, ¡no hay votos!. Sé el primero en puntuar este contenido.

50 comentarios en “Llenar select HTML con MySQL PHP: Ejemplos”

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

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

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

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

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

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

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

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

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

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

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

    1. 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="";
      }
      ?>
      <input name="ad" <?php  echo $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

      <input name="ad" value="<?php  echo $checkbox; ?>">

      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.

  11. FLOR DEL CARMEN BERNAL CURIEL

    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»].»;

    }
    ?>

    1. FLOR DEL CARMEN BERNAL CURIEL

      Precio del garrafon:

      <?php
      $result1=mysqli_query($conn, "select * from garrafon");
      while ($row1 = mysqli_fetch_array($result1)) {
      echo '’.$row1[«precio_garrafon»].»;

      }
      ?>

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

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

        1. 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:

          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');
           

          Saludos Cordiales.

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

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

      <select name="nombre"required>
      ......
      </select>
      
  13. 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

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

      < select name="nombre">
      /*Consulta para mostrar el valor almacenado en la base de datos*/
      
      
      /*Consulta para mostrar valores del select*/
      
      ......
      
      

      Espero haber solucionado tu duda, saludos

  14. 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» ?

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

  15. CARLOS PEÑAHERRERA

    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

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

      < select name="nombre" method="POST">
      
      
      ......
      
      

      Espero que te sirva, saludos.
      Ante cualquier duda, escríbeme por este medio.

  16. 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].’;
    }
    ?>

    1. 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?

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

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

  18. Bonifacio Flores Caballero

    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’].»;
    }}
    ?>

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

    2. 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].»;
      }
      ?>

  19. Bonifacio Flores Caballero

    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’].»;
    }}
    ?>

Deja un comentario

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

Scroll al inicio
Esta web utiliza cookies propias para su correcto funcionamiento. Contiene enlaces a sitios web de terceros con políticas de privacidad ajenas que podrás aceptar o no cuando accedas a ellos. Al hacer clic en el botón Aceptar, acepta el uso de estas tecnologías y el procesamiento de tus datos para estos propósitos.
Privacidad