0Pricing
HTML Academy · Lección

Menús desplegables: select y option

Cree menús desplegables de selección con select y option

Menús desplegables: select y option es una lección gratuita de HTML Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de HTML Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de HTML Academy incluye 4 lecciones en total.

El elemento select

El elemento <select> crea un menú desplegable:

<label for="country">Country</label>
<select id="country" name="country">
  <option value="us">United States</option>
  <option value="gb">United Kingdom</option>
  <option value="de">Germany</option>
</select>

value frente a texto de option

Cada <option> tiene un value (que se envía al servidor) y un texto visible:

<select name="color">
  <option value="">-- Select a color --</option>  <!-- placeholder -->
  <option value="#ff0000">Red</option>
  <option value="#00ff00">Green</option>
  <option value="#0000ff">Blue</option>
</select>
<!-- value="#ff0000" is submitted; "Red" is displayed -->

Atributo selected

Preseleccione una opción con el atributo selected:

<select name="plan">
  <option value="free">Free</option>
  <option value="pro" selected>Pro (Recommended)</option>
  <option value="enterprise">Enterprise</option>
</select>

optgroup para opciones categorizadas

Agrupe las opciones relacionadas con <optgroup>:

<select name="language">
  <optgroup label="Frontend">
    <option value="html">HTML</option>
    <option value="css">CSS</option>
    <option value="js">JavaScript</option>
  </optgroup>
  <optgroup label="Backend">
    <option value="python">Python</option>
    <option value="node">Node.js</option>
  </optgroup>
</select>

Atributo multiple

Permita seleccionar varias opciones con el atributo multiple:

<label for="skills">Select your skills (Ctrl+Click for multiple)</label>
<select id="skills" name="skills" multiple size="5">
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
  <option value="python">Python</option>
</select>
<!-- size controls how many options are visible -->
<!-- Submitted as multiple values: skills=html&skills=css -->

Atributo size

El atributo size controla cuántas opciones son visibles:

<!-- size=1 (default): dropdown -->
<select size="1">...</select>

<!-- size>1: list box -->
<select size="4">
  <option>HTML</option>
  <option>CSS</option>
  <option>JavaScript</option>
  <option>Python</option>
</select>

Opciones y grupos disabled

Deshabilite opciones individuales o grupos completos:

<select name="plan">
  <option value="free">Free</option>
  <option value="pro">Pro</option>
  <option value="enterprise" disabled>Enterprise (Contact Sales)</option>
</select>

<select>
  <optgroup label="Legacy (deprecated)" disabled>
    <option value="v1">Version 1</option>
  </optgroup>
</select>

Estilos de select

Las posibilidades de aplicar estilos a un <select> nativo son limitadas; esto es lo que funciona:

select {
  appearance: none;   /* remove native dropdown arrow */
  -webkit-appearance: none;
  width: 100%;
  padding: 0.5rem 2.5rem 0.5rem 0.75rem;
  border: 1px solid #ddd;
  border-radius: 4px;
  background-image: url("arrow-down.svg");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  background-size: 1rem;
  cursor: pointer;
}

Menús desplegables personalizados frente a select nativo

Estas son las ventajas y desventajas que debe considerar al usar un componente de menú desplegable personalizado:

  • select nativo; accesible de forma predeterminada, compatible con dispositivos móviles y funciona sin JavaScript
  • Menú desplegable personalizado; ofrece control total sobre los estilos, pero requiere una implementación completa de ARIA y la gestión del teclado

Prefiera <select> nativo para la mayoría de los casos de uso.

Lectura del valor seleccionado en JavaScript

Obtenga o establezca el valor seleccionado con JavaScript:

const select = document.getElementById('country');

// Get selected value:
console.log(select.value);  // e.g. 'us'

// Get selected option text:
console.log(select.options[select.selectedIndex].text);

// Set selected value:
select.value = 'de';

// Listen for changes:
select.addEventListener('change', () => {
  console.log('Selected:', select.value);
});

Patrón de opción de marcador de posición

Cree una opción de marcador de posición que no se pueda seleccionar:

<select name="role" required>
  <option value="" disabled selected>-- Select your role --</option>
  <option value="dev">Developer</option>
  <option value="designer">Designer</option>
  <option value="pm">Product Manager</option>
</select>
<!-- disabled + selected: shows as placeholder
     value="" + required: fails validation if not changed -->

Comprobación rápida

¿Qué elemento agrupa las opciones relacionadas dentro de un menú desplegable select?

Resumen: select y option

Aspectos esenciales de los menús desplegables:

  • <select> + <option>; menú desplegable
  • value en option; lo que se envía al servidor
  • selected; preselecciona una opción
  • <optgroup label>; agrupa opciones relacionadas
  • multiple; permite varias selecciones
  • size; muestra N opciones sin abrir un menú desplegable

Preguntas frecuentes

¿La lección «Menús desplegables: select y option» es gratis?

Sí — el texto completo de «Menús desplegables: select y option» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de HTML Academy, actualiza a CoddyKit PRO. El curso de HTML Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Menús desplegables: select y option»?

Cree menús desplegables de selección con select y option Practicas HTML Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.

¿Necesito experiencia previa para empezar HTML Academy?

No se requiere experiencia previa. HTML Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.

¿Cuánto tiempo toma la lección «Menús desplegables: select y option»?

La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.

¿Puedo escribir y ejecutar código en esta lección de HTML Academy?

Sí. Cada lección de HTML Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.

Todas las lecciones de este curso

  1. Menús desplegables: select y option
  2. Textarea para entrada multilínea
  3. Grupos de casillas y botones de opción
  4. Datalist para autocompletado
← Volver a HTML Academy