Como crear una lista desplegable HTML (2022)

Una lista desplegable HTML (También conocidas como combo box en los lenguajes de programación) permiten a los usuarios de una página web, seleccionar un valor de una lista de opciones, como las que vez cuando te piden ingresar tu país de nacimiento.

En este artículo aprenderás todo lo necesario para crear tus listas desplegables en tus páginas web y también compartiré contigo algunos consejos y tipos de listas que puedes crear.

¿Cómo crear una lista desplegable HTML?

Para crear una lista se usa la etiqueta SELECT, que usualmente debe llevar un nombre y un ID, el nombre se usa para que el programa que procese los datos del formulario pueda saber qué información está recibiendo. El ID se utiliza para poder acceder a ella por medio de JavaScript, por ejemplo, para validar si se ha llenado, para agregar o eliminar opciones dinámicamente, etc.

No hay ningún problema si el nombre y el ID son los mismos, lo único por lo que debes preocuparte es en que no se repitan en otro elemento de tu formulario, tampoco deben llevar espacios o caracteres especiales.

Luego necesitamos agregar opciones. Aquí hay un ejemplo del código que puedes usar:

<select name="color" id="color">
  <option value="r">Rojo</option>
  <option value="a">Azul</option>
  <option value="v">Verde</option>
</select>

Con el código anterior se crea una lista llamada color, con un id nombrado también como color. La lista posee 3 opciones, estas fueron agregadas con las etiquetas <option></option> como se puede observar, hay un atributo llamado value en cada opción, este es el valor que llega al programa que procesa el formulario, por ejemplo, si alguien selecciona el color rojo en esta lista, el programa que procese la información recibirá una variable llamada color con el valor r.

La descripción de cada valor de la lista es el texto que coloques entre las etiquetas <option></option>

Si agregas el código anterior en una página web, el resultado será algo como este:

Crea una lista desplegable HTML con elementos agrupados.

Ahora vamos a ver otro tipo de listas desplegables en las que puedes mostrar los valores por grupos. Para nuestro ejemplo vamos a permitir que mediante nuestra página web se pueda seleccionar un ingrediente para una pizza y para facilitar la elección vamos a mostrar los ingredientes agrupados por “Vegetales” y “Carnes”.

Como ya sabes los valores de la lista se definen usando la etiqueta <option>, para crear grupos lo que debemos hacer es encerrar esos valores entre etiquetas <optgroup> </optgroup>, estas etiquetas tienen un atributo llamado label en el cual colocamos el texto del grupo. Para lograr el ejemplo del que hable, el código sería algo como este:

<select name="ingrediente" id="ingrediente">
  <optgroup label="Vegetales">
     <option value="aceituna">Aceitunas</option>
     <option value="tomate">Tomate</option>
     <option value="cebolla">Cebolla</option>
  </optgroup>
  <optgroup label="Carnes">
     <option value="salchica">Salchicha</option>
     <option value="peperoni">Peperoni</option>
     <option value="jamon">Jamon</option>
  </optgroup>
</select>

Si copias el código en una página web y la abres, verás algo como esto:

Crea una lista HTML que se muestre desplegada.

Las listas desplegables o combo box permiten seleccionar un valor de entre una lista de muchas opciones, sin embargo, cuando la lista es pequeña (por ejemplo, unas 5 opciones), es aceptable mostrar la lista ya desplegada. De esa forma, seleccionar un valor es más cómodo para las personas.

Para lograr esto podemos usar otro atributo de la etiqueta select, llamado size, aquí colocamos la cantidad de elementos que serán visibles. Si tomamos el ejemplo anterior, tenemos 6 ingredientes (opciones) y 2 grupos, entonces en total suman 8, ese es el valor que debemos poner en el atributo size.

También podríamos poner un valor menor como 6, pero en ese caso se mostrará una barra de desplazamiento vertical (Scrollbar)

El código para mostrar la lista en forma desplegada sería algo como este:

<select name="ingrediente" id="ingrediente" size="8">
  <optgroup label="Vegetales">
     <option value="aceituna">Aceitunas</option>
     <option value="tomate">Tomate</option>
     <option value="cebolla">Cebolla</option>
  </optgroup>
  <optgroup label="Carnes">
     <option value="salchica">Salchicha</option>
     <option value="peperoni">Peperoni</option>
     <option value="jamon">Jamon</option>
  </optgroup>
</select>

Y al ejecutarlo verás la lista de esta forma:

Como crear una lista que permita seleccionar más de un valor.

En ocasiones puede ser útil permitir seleccionar varias opciones en lista desplegable HTML, en el ejemplo anterior permitimos seleccionar un ingrediente para una pizza, ahora vamos a permitir que selecciones varios ingredientes en la lista.

Para esto es necesario que la lista se presente en forma desplegada, y además vamos a agregarle el atributo multiple, este no lleva ningún valor, simplemente lo agregamos. Aquí este el código de ejemplo:

<select name="ingrediente" id="ingrediente" size="8" multiple>
  <optgroup label="Vegetales">
     <option value="aceituna">Aceitunas</option>
     <option value="tomate">Tomate</option>
     <option value="cebolla">Cebolla</option>
  </optgroup>
  <optgroup label="Carnes">
     <option value="salchica">Salchicha</option>
     <option value="peperoni">Peperoni</option>
     <option value="jamon">Jamon</option>
  </optgroup>
</select>

Ahora las personas podrán seleccionar varias opciones de la lista si mantienen presionada la tecla Ctrl mientras hacen clic en cada elemento de la lista. Para borrar una selección solo deben de volver a hacer clic sobre la opción mientras presionan la tecla Ctrl.

Aquí está la imagen de cómo se verá la lista y como puedes ver ya he seleccionado los 3 valores que aparecen con color azul de fondo.

Como crear combo box con Bootstrap

Como ya habrás notado, la listas en estos ejemplos no se ven tan “atractivas” como se ven en algunas páginas web o aplicaciones web. Para darle a las páginas web ese atractivo visual se usan hojas de estilo (CSS) y como esto es un tema un poco complicado, la mejor forma de hacer es usando una serie de hojas pre configuradas en un framework llamado Bootstrap.

Si nunca lo has usado, aquí hay una lista de videos sobre cómo usar Bootstrap.

Básicamente, lo que debes de hacer es agregar una hoja de estilos a tu página web y dos archivos de JavaScript (jQuery y Bootstrap), luego a cada elemento le agregas las clases para que tome el estilo predeterminado de Bootstrap. Veamos el código de ejemplo:

<!DOCTYPE html>
<html lang="es" dir="ltr">
  <head>
    <meta charset="utf-8">
    <title></title>

    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css"
    integrity="sha384-B0vP5xmATw1+K9KRQjQERJvTumQW0nPEzvF6L/Z6nronJ3oUOFUFpCjEUQouq2+l"
    crossorigin="anonymous">
  </head>
  <body>



    <select name="ingrediente" id="ingrediente" size="8" multiple class="form-control">
      <optgroup label="Vegetales">
         <option value="aceituna">Aceitunas</option>
         <option value="tomate">Tomate</option>
         <option value="cebolla">Cebolla</option>
      </optgroup>
      <optgroup label="Carnes">
         <option value="salchica">Salchicha</option>
         <option value="peperoni">Peperoni</option>
         <option value="jamon">Jamon</option>
      </optgroup>
    </select>


    <script src="https://code.jquery.com/jquery-3.5.1.slim.min.js"
    integrity="sha384-DfXdz2htPH0lsSSs5nCTpuj/zy4C+OGpamoFVy38MVBnE+IbbVYUew+OrCXaRkfj" crossorigin="anonymous"></script>
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"
    integrity="sha384-Piv4xVNRyMGpqkS2by6br4gNJ7DXjqk09RmUpJ8jgGtD7zP9yug3goQfGII0yAns" crossorigin="anonymous"></script>
  </body>
</html>

En esta imagen se puede apreciar en donde debes agregar la hoja de estilo, los archivos de JS y la clase form-control que debes agregar solo en la etiqueta select, no es necesario agregarlos en las etiquetas option.

Ahora, si abres la página web con este código, verás algo como esto:

Quizá la lista no se vea muy espectacular, pero en general si creas una página web o un formulario usando Bootstrap, el resultado final puede verse como este:

Conclusiones

Espero que te haya gustado este artículo, si tienes alguna duda, no olvides dejarme un comentario.

Cuando crees una lista o combo box, no olvides agregar un nombre y un ID, el ID y el nombre deben de ser únicos, es decir que ningún otro elemento de la página web debe llevar el mismo nombre. Esto hace que los elementos puedan ser modificados o consultados mediante JavaScript y que los datos enviados en el formulario puedan ser procesados por PHP, Python o cualquier otro lenguaje de programación web.