Docs ejecutables de HTML: Lista desplegable

Q: ¿Cómo se crea una lista desplegable en HTML?

Usa con un por opción: Rojo Azul . Dale al select un name y un .

Q: ¿Cómo fijo la opción por defecto de un select?

Añade selected a esa opción: Azul . Sin él, queda seleccionada la primera opción. En JavaScript, asigna select.value = 'blue'.

Q: ¿Cómo pongo un placeholder en un select?

Haz que la primera opción esté vacía y no se pueda elegir: Elige un país . Añade required al para que el formulario no se pueda enviar hasta que se elija una opción real.

Q: ¿Cómo obtengo el valor seleccionado de un select en JavaScript?

select.value es el valor de la opción seleccionada. Para su texto visible usa select.selectedOptions[0].text, y escucha el evento change para reaccionar cuando cambia la elección. En un select múltiple, recorre select.selectedOptions.

Q: ¿Qué diferencia hay entre un select y un datalist?

Un solo permite las opciones de la lista. Un con un sugiere opciones mientras el lector escribe pero acepta cualquier texto. Usa select cuando la respuesta tiene que ser una de las tuyas.

Cómo hacer una lista desplegable en HTML

Una lista desplegable es un elemento <select> con un <option> por cada opción. El value de cada opción es lo que envía el formulario; el texto entre las etiquetas es lo que ve el lector. Elige una y pulsa Submit:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Select</title>
</head>
<body>
  <form>
    <label for="lang">Course language</label>
    <select id="lang" name="language">
      <option value="py">Python</option>
      <option value="js" selected>JavaScript</option>
      <option value="java">Java</option>
      <option value="cpp">C++</option>
    </select>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

El formulario envía language=js: el name del select y el value de la opción elegida. selected fija la opción por defecto; sin él, se elige la primera opción. Si una opción no tiene value, se envía su texto.

Conecta la etiqueta con el select mediante for e id (o envolviéndolo) para que al pulsar la etiqueta el foco pase al desplegable y los lectores de pantalla lo anuncien.

Atributos de select y option

Elemento	Atributo	Hace
`<select>`	`name`	La clave con la que se envía el valor
`<select>`	`required`	Hay que elegir una opción real, no una primera opción vacía de marcador
`<select>`	`multiple`	Se pueden elegir varias opciones
`<select>`	`size`	Cuántas filas se ven (lo convierte en un cuadro de lista)
`<select>`	`disabled`	Todo el desplegable queda desactivado y no se envía
`<option>`	`value`	Lo que se envía cuando se elige
`<option>`	`selected`	Elegida al cargar la página
`<option>`	`disabled`	Se muestra pero no se puede elegir
`<optgroup>`	`label`	El encabezado del grupo

Una opción de marcador con required

Un select siempre tiene un valor, así que sin un marcador se envía la primera opción real aunque el lector nunca haya tocado el desplegable. Una primera opción vacía lo soluciona, y required detiene el envío hasta que se elige una opción real:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Placeholder</title>
</head>
<body>
  <form>
    <label>Country
      <select name="country" required>
        <option value="" disabled selected>Choose a country</option>
        <option value="br">Brazil</option>
        <option value="de">Germany</option>
        <option value="jp">Japan</option>
      </select>
    </label>
    <button type="submit">Continue</button>
  </form>
</body>
</html>

Pulsa Continue antes de elegir: el navegador se niega y te pide que selecciones un elemento. El marcador tiene value="", que es lo que required considera vacío, y disabled para que no se pueda volver a elegir una vez elegido un país.

Agrupar opciones con optgroup

<optgroup label="..."> pone un encabezado sobre un conjunto de opciones. El encabezado no se puede seleccionar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>optgroup</title>
</head>
<body>
  <form>
    <label>Car
      <select name="car">
        <optgroup label="Electric">
          <option value="model3">Model 3</option>
          <option value="ioniq">Ioniq 5</option>
        </optgroup>
        <optgroup label="Hybrid">
          <option value="prius">Prius</option>
          <option value="corolla">Corolla Hybrid</option>
        </optgroup>
      </select>
    </label>
    <button type="submit">Submit</button>
  </form>
</body>
</html>

Los grupos no se pueden anidar: una lista tiene un solo nivel de encabezados, no más. disabled en un <optgroup> deshabilita todas sus opciones.

Selección múltiple

multiple permite al lector elegir varias opciones y convierte el desplegable en un cuadro de lista. Mantén Ctrl (Cmd en Mac) para añadir opciones de una en una, o Mayús para seleccionar un rango:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Multiple select</title>
</head>
<body>
  <form>
    <label for="skills">Skills</label><br>
    <select id="skills" name="skills" multiple size="5">
      <option value="html" selected>HTML</option>
      <option value="css" selected>CSS</option>
      <option value="js">JavaScript</option>
      <option value="sql">SQL</option>
      <option value="git">Git</option>
    </select>
    <p><button type="submit">Submit</button></p>
  </form>
</body>
</html>

El formulario envía skills=html y skills=css: el mismo nombre una vez por cada opción elegida. Mucha gente no conoce el gesto de Ctrl+clic, así que para unas pocas opciones es más fácil de usar un grupo de checkboxes.

Leer y fijar el valor en JavaScript

select.value lee y fija el valor de la opción elegida, y el evento change se dispara cuando el lector elige otra opción. Un uso habitual es un segundo desplegable cuyas opciones dependen del primero:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Dependent dropdowns</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    label { display: block; margin-bottom: 8px; }
  </style>
</head>
<body>
  <form>
    <label>Country
      <select name="country" id="country">
        <option value="fr">France</option>
        <option value="it">Italy</option>
      </select>
    </label>
    <label>City <select name="city" id="city"></select></label>
    <button type="submit">Submit</button>
  </form>
  <p id="out"></p>

  <script>
    const cities = { fr: ['Paris', 'Lyon', 'Nice'], it: ['Rome', 'Milan'] };
    const country = document.querySelector('#country');
    const city = document.querySelector('#city');

    const fill = () => {
      city.replaceChildren(...cities[country.value].map((name) => new Option(name, name.toLowerCase())));
    };
    const show = () => {
      document.querySelector('#out').textContent =
        'value: ' + city.value + ', text: ' + city.selectedOptions[0].text;
    };

    country.addEventListener('change', () => { fill(); show(); });
    city.addEventListener('change', show);
    fill();
    show();
  </script>
</body>
</html>

new Option(text, value) crea una opción. select.selectedIndex es la posición de la opción elegida, y select.selectedOptions lista las elegidas, que es como se lee un select múltiple.

Dar estilo a un select

La lista abierta del desplegable la dibujan el navegador y el sistema operativo, y se puede estilizar poco. La caja cerrada sí: appearance: none quita la flecha nativa, y una imagen de fondo pone la tuya en su lugar:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Styled select</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .styled {
      appearance: none;
      font: inherit;
      padding: 8px 36px 8px 12px;
      border: 2px solid #9ca3af;
      border-radius: 8px;
      background-color: #fff;
      background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M1 1l5 5 5-5' fill='none' stroke='%23111827' stroke-width='2'/%3E%3C/svg%3E");
      background-repeat: no-repeat;
      background-position: right 12px center;
      color: #111827;
    }
    .styled:focus-visible { outline: 3px solid #2563eb; outline-offset: 2px; }
  </style>
</head>
<body>
  <label>Default <select><option>Option one</option><option>Option two</option></select></label>
  <br><br>
  <label>Styled
    <select class="styled">
      <option>Option one</option>
      <option>Option two</option>
    </select>
  </label>
</body>
</html>

El padding extra al final deja sitio a la flecha para que el texto largo de una opción no pase por debajo de ella. font: inherit importa tanto aquí como en los botones: los selects usan por defecto la fuente pequeña de formulario del navegador. Las opciones de la lista abierta conservan el aspecto nativo. Chrome también permite estilizar la lista abierta si lo activas con appearance: base-select; los navegadores sin ese soporte muestran la lista nativa. El control total en todas partes exige un widget propio construido con ARIA, lo que cuesta mucho más de hacer bien de lo que parece.

¿select, radio buttons o datalist?

Usa	Cuando
`<select>`	Una elección de una lista larga, o cuando el espacio es escaso
Radio buttons	Una elección entre pocas opciones que deben verse todas (consulta radio button en HTML)
`<input>` con `<datalist>`	Sugerencias, pero se permite cualquier valor escrito

Errores comunes

Sin marcador en una elección obligatoria. Se envía la primera opción real aunque el lector nunca la haya elegido.
Un marcador con un valor real, como value="none". required lo trata como una elección válida. Usa value="".
Opciones sin value cuando el texto es largo o está traducido. El servidor recibe el texto visible, que cambia con el idioma.
multiple para pocas opciones. Los checkboxes son más fáciles de usar.
Escuchar click en las opciones. Usa change en el <select>; también se dispara con los cambios hechos con el teclado.
Sin etiqueta. Un select que solo tiene un marcador se queda sin nombre en cuanto se elige una opción.

Preguntas frecuentes

¿Cómo se crea una lista desplegable en HTML?

Usa <select> con un <option> por opción: <select name="color"><option value="red">Rojo</option><option value="blue">Azul</option></select>. Dale al select un name y un <label>.

¿Cómo fijo la opción por defecto de un select?

Añade selected a esa opción: <option value="blue" selected>Azul</option>. Sin él, queda seleccionada la primera opción. En JavaScript, asigna select.value = 'blue'.

¿Cómo pongo un placeholder en un select?

Haz que la primera opción esté vacía y no se pueda elegir: <option value="" disabled selected>Elige un país</option>. Añade required al <select> para que el formulario no se pueda enviar hasta que se elija una opción real.

¿Cómo obtengo el valor seleccionado de un select en JavaScript?

select.value es el valor de la opción seleccionada. Para su texto visible usa select.selectedOptions[0].text, y escucha el evento change para reaccionar cuando cambia la elección. En un select múltiple, recorre select.selectedOptions.

¿Qué diferencia hay entre un select y un datalist?

Un <select> solo permite las opciones de la lista. Un <input> con un <datalist> sugiere opciones mientras el lector escribe pero acepta cualquier texto. Usa select cuando la respuesta tiene que ser una de las tuyas.

Conceptos relacionados