HTML – Cargar combobox (Select) con registros de una tabla

En HTML al combobox se le llama SELECT, yo soy programador de escritorio (aplicaciones para Windows) y a ese control toda la vida lo he conocido como un Combobox. en su sintaxis se necesita definir el nombre al select (que será recogido por el método POST) y cada elemento dentro de un tag option que tendrá como propiedad value el valor/clave/código que será recogido con POST, finalmente el texto que se mostrará en el navegador al usuario

<select name="lenguajes_programacion">
  <option value="C01">Visual Basic</option>
  <option value="C02">Delphi</option>
  <option value="C03">Power Builder</option>
</select>

combobox_html

Si por ejemplo escogimos Visual Basic en nuestro combo, cuando recolectemos los datos $_POST[‘lenguajes_programacion’] tendrá el valor de C01.

Teniendo eso como base pasaremos con el código que llenará nuestro combo con los datos de una tabla, he usado la tabla de tbl_estados de nombre de estados y abreviaturas de USA para este ejemplo y el tutorial Mysqli orientado a Objetos – Conectarse a Base de datos

<?php
$server     = 'localhost'; //servidor
$username   = 'xxxxxxx'; //usuario de la base de datos
$password   = 'xxxxxxxx'; //password del usuario de la base de datos
$database   = 'xxxxxxxx'; //nombre de la base de datos

$conexion = @new mysqli($server, $username, $password, $database);

if ($conexion->connect_error) //verificamos si hubo un error al conectar, recuerden que pusimos el @ para evitarlo
{
    die('Error de conexión: ' . $conexion->connect_error); //si hay un error termina la aplicación y mostramos el error
}

$sql="SELECT * from tbl_estados";
$result = $conexion->query($sql); //usamos la conexión para dar un resultado a la variable

if ($result->num_rows > 0) //si la variable tiene al menos 1 fila entonces seguimos con el código
{
    $combobit="";
    while ($row = $result->fetch_array(MYSQLI_ASSOC)) 
    {
        $combobit .=" <option value='".$row['abbr']."'>".$row['nombre']."</option>"; //concatenamos el los options para luego ser insertado en el HTML
    }
}
else
{
    echo "No hubo resultados";
}
$conexion->close(); //cerramos la conexión
?>
<html>
<head>
<title>Llenar un Combobox/Select con registros de una Tabla</title>
<link href="contactos.css" rel="stylesheet" type="text/css" />
</head>
<body>
   <select name="estado">
       <?php echo $combobit; ?>
   </select>
</body>
</html>
Archivos adjuntos

30 Comentarios para “HTML – Cargar combobox (Select) con registros de una tabla”

  1. Muy buen aporte, amigo. ¡Gracias! 😀

  2. Genial! Es lo que buscaba! 🙂

  3. Muy bien explicado
    Mis felicitaciones

  4. Gracias por el aporte 😀 muy explicado.

  5. me funciono de maravillas!!

  6. Muy bueno… y para recolectar datos de una tabla?, cuyo dato fue seleccionado de un combobox?
    Gracias por su ayuda.

  7. eso es lo que buscaba pero nesetito obtener el codigo de lo que voy a listar en el combobox como lo puedo hacer?

  8. Hola, muy bueno, una pregunta, como podria hacer para llenar otro combobox igual con datos de la base de datos,pero que dependa de la informacion del primer combobox? ejemplo
    Primer combo – Pais: Alemania
    Segundo combo – Ciudad: Frankfurt

    que me muestre las ciudades de alemania si elijo alemania en el primer combobox.

    Saludos y gracias

    1. tendrias que hacerlo con Ajax, cuando selecionas el valor del primer combo, envias la soliitud y que te responda con las ciudades de ese pais, aqui un ejemplo: http://www.elcodigofuente.com/ejemplo-basico-de-ajax-get-830/

  9. disculpa la pregunta el signo -> que indica ?? por ejemplo $conexion->$conect _error. agradeceria mucho me resolvieras la duda.

    1. Cuando manejas un Objeto en PHP, sus metodos y propiedades (funciones y variables publicas) se accesan de esa manera; es como el caso de matrices que se usa los corchetes $matriz[INDICE], en objeto es $variable->funcion(); o $variable->variable_publica

      Saludos

  10. necesito consultar una llave foranea en un combobox lo puedo hacer de la manera que esta en el tutorial ?

  11. GRACIAS mi pana me salvaste el proyecto I LOVE

  12. Buenas, en primer lugar agradecer que hayas facilitado este ejemplo. Mi pregunta es la siguiente, quiero hacer que en un option salga mas de un valor y que se almacene en una tabla.

    Gracias

  13. alguien me puede ayudar con las siguientes preguntas
    1.- Escriba una función que despliegue 3
    combo box que especifiquen una fecha: día,
    mes y año. (no retorna nada).
    2.- Escriba una función que reciba como
    parámetro un arreglo con los nombres de los
    países (5 países) y generar con un combo box
    , esta función debe retornar código HTML
    (string).

  14. Este articulo es de mucha ayuda gracias, sabes alguna manera de hacer lo mismo pero usando java ?

  15. como aria para guardar lo que selecione por ejemplo un pais…..en otra tabla

  16. hola que tal me podrias ayudar con este problema en tu opcion pones lo siguiente

    Delphi
    Power Builder
    pero como le aria para que dentro de un aopcion elija las 2 antes menionadas digamos que dentro de esta linea

    Delphi y Power Builder

  17. y como le haria para que dentro de un solo option value seleccione el co2 y co3 al mismo tiempo cual seria la intruccion o dejo entre comillas las 2 o como le haria¡¡¡ te agradeceria que me ayudaras¡¡
    saludos¡¡¡

  18. gracias me salvastes ufff que buen tuto

  19. Muy buen aporte, gracias

  20. Hola:

    Gracias por el aporte, me ha servido muchísimo.

    Mi pregunta es:

    como puede hacer para que mi formulario mande un correo a la opcion del , ya lo que configurado y al momento de mandarlo se supone que lo manda a -«value»-, lo que quedó en el HTML final. pero mi correo no llega a nungun lado.

    para probarlo escribí el el echo «$area» donde el resultado sí es el correo que espero, pero la cosa es que el correo nunca llega. mi código es el siguiente:

    Del lado del llenado del formulario:

    connect_error) //verificamos si hubo un error al conectar, recuerden que pusimos el @ para evitarlo
    {
    die(‘Error de conexión: ‘ . $conexion->connect_error); //si hay un error termina la aplicación y mostramos el error
    }

    $sql=»SELECT * from idmail»;
    $result = $conexion->query($sql); //usamos la conexion para dar un resultado a la variable

    if ($result->num_rows > 0) //si la variable tiene al menos 1 fila entonces seguimos con el codigo
    {
    $combobit=»»;
    while ($row = $result->fetch_array(MYSQLI_ASSOC))
    {
    $combobit .=» «.$row[‘idarea’].»»; //concatenamos el los options para luego ser insertado en el HTML
    }
    }
    else
    {
    echo «No hubo resultados»;
    }
    $conexion->close(); //cerramos la conexión
    ?>

    Y este es el procedimiento que hace que se envíe el correo.

    $donde\n»;
    $msg .=»\n»;
    $msg .=utf8_decode(«Mi información adicional:»);
    $msg .=»\n»;
    $msg .=utf8_decode(«\n $comentario»);
    $to=»$area»;
    $subjet=»Contacto desde sitio WEB»;
    $mailheaders=»from:$nombre \r\n»;
    mail(«$area»,»$subjet»,»$msg»,»$mailheaders»);
    echo «tu correo se envio correctaente a $area»;
    ?>

    gracias por tu aporte, ojalá me puedas apoyar.

    Saludos.

  21. Claro y sencillo!!!!

    Gracias!!!!!!

  22. Consulta y como lo haces para llamar a esa función???, en el caso que el código php se encuentre en una clase Service¡???

    Muchas gracias, excelente tu post.

  23. Hola muy bien explicado tu código, mi pregunta es la siguiente: Tengo un combobox que asigna roles de usuario y que efectivamente funciona a al guardar la información en la BD, he realizado una pagina actualizar usuario y ese archivo tiene un formulario donde recoge la información de ese usuario pero también tiene un combobox donde recoge la información de los roles pero necesito que me muestre el rol actual que tiene ese usuario y los demás roles que puedo asignarle en caso de cambiar rol en una actualización. Te agradecería tu valiosa ayuda.

  24. Me ayudo un monton. Gracias por el tiempo destinado a ayudar.

  25. Muchas gracias solucione mi problema !!!

  26. Genial Muchas gracias

  27. Gracias por el aporte saludos

  28. muy bueno el tuturial, como hago para llenar una tabla que contiene un combobox, varios imput y varios combox que contiene año mes y dia

Deja una respuesta

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