Seleccionar valor predeterminado en HTML

Este artículo explica cómo hacer que una opción sea la selección inicial de un menú desplegable HTML. Coloca el atributo selected en el <option> deseado dentro de <select>. Puedes escribir el atributo con un valor explícito o usar su forma booleana sin valor. Ambos ejemplos usan las mismas opciones y valores para que puedas comparar directamente las dos formas.

Establecer una opción predeterminada con selected="selected"

Escribe selected="selected" en la etiqueta de apertura de la opción que debe aparecer seleccionada cuando se cargue la página. El atributo va en <option>, no en <select> ni en una etiqueta <selected> independiente. En este ejemplo, la tercera opción está seleccionada inicialmente y el valor enviado es 3.

La opción seleccionada conserva su posición original en la lista. Añadir el atributo establece la selección inicial; no mueve la opción por encima de las demás. Quien use la página puede elegir otra opción, que pasará a ser la selección actual.

El atributo name asigna al control un nombre de campo del formulario, y el value de la opción seleccionada proporciona el valor de ese campo al enviar el formulario. La etiqueta de texto se asocia con el control mediante los valores coincidentes de for e id, de modo que elegir una opción siga siendo comprensible para las personas que usan tecnologías de asistencia. Si necesitas que la página empiece con otra opción, mueve el atributo selected a esa opción.

El siguiente HTML es un ejemplo de marcado estático. Muestra el código fuente de la página y no es el resultado de una ejecución.

<label for="number">Choose a number:</label>
<select id="number" name="number">
  <option value="1">One</option>
  <option value="2">Two</option>
  <option value="3" selected="selected">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>

Este ejemplo ejecutable de JavaScript modela los valores de las opciones del marcado e indica el valor de la opción marcada como seleccionada. El comportamiento del navegador se muestra en los ejemplos HTML anteriores.

const options = [
  { value: "1", selected: false },
  { value: "2", selected: false },
  { value: "3", selected: true },
  { value: "4", selected: false },
  { value: "5", selected: false },
];

const initialValue = options.find((option) => option.selected).value;
console.log(initialValue);

3

Usar el atributo booleano selected

selected es un atributo booleano: su presencia marca la opción como seleccionada inicialmente. En HTML puedes omitir su valor, como en selected, o escribir la forma explícita selected="selected" que se mostró antes. En este caso, ambas formas expresan la misma selección; el nombre del atributo debe seguir siendo selected.

En este ejemplo equivalente, la segunda opción es la selección inicial. Su value es 2, mientras que el texto que ve el lector es “Two”, que permanece en inglés en el ejemplo sin modificar. Asignar un value a cada opción mantiene claro el valor del formulario y lo distingue de la etiqueta visible. Si se envía el formulario antes de que el lector cambie la selección, se envía el valor de la opción seleccionada.

Usa esta forma booleana cuando quieras escribir HTML más conciso. Añádela dentro de la etiqueta de apertura de la opción que quieras seleccionar. No escribas <selected> después de una opción: esa no es la sintaxis del atributo. La opción conserva su posición en la lista y el lector puede elegir otro valor.

Este también es un ejemplo de marcado estático, no una lista de resultados de ejecución.

<label for="number-short">Choose a number:</label>
<select id="number-short" name="number">
  <option value="1">One</option>
  <option value="2" selected>Two</option>
  <option value="3">Three</option>
  <option value="4">Four</option>
  <option value="5">Five</option>
</select>