El elemento “select” no puede tener más de un descendiente “option” seleccionado a menos que se especifique el atributo “multiple”.

El elemento <select> proporciona un menú de opciones para el usuario. Por defecto, funciona como un control de selección única: el usuario puede elegir exactamente una opción de la lista. El atributo selected en un elemento <option> indica qué opción debe estar preseleccionada cuando se carga la página. Cuando dos o más elementos <option> tienen el atributo selected dentro de un <select> de selección única, esto crea un estado inválido y contradictorio: se le dice al navegador que preseleccione múltiples elementos en un control que solo admite una selección.

Cuando los navegadores encuentran esta contradicción, su comportamiento es inconsistente. La mayoría seleccionará silenciosamente la última <option> marcada como selected e ignorará las demás, pero esto no está garantizado por la especificación. Confiar en comportamientos indefinidos conduce a resultados impredecibles entre navegadores y puede confundir tanto a usuarios como a desarrolladores sobre qué valor se enviará realmente con un formulario.

Desde el punto de vista de la accesibilidad, las tecnologías de asistencia pueden anunciar el estado seleccionado de las opciones a los usuarios. Múltiples atributos selected en un <select> de selección única pueden hacer que los lectores de pantalla proporcionen información engañosa o confusa sobre qué opción está actualmente activa.

La especificación HTML (WHATWG) establece explícitamente que si el atributo multiple está ausente, no más de un descendiente <option> del <select> puede tener el atributo selected.

Cómo solucionarlo

Tienes dos opciones según tu intención:

1. Si solo una opción debe estar preseleccionada: Elimina el atributo selected de todas las <option> excepto una. Esto mantiene el <select> como un menú desplegable estándar de selección única.
2. Si múltiples opciones deben estar preseleccionadas: Añade el atributo multiple al elemento <select>. Esto cambia el control de un menú desplegable a una caja de lista donde los usuarios pueden seleccionar múltiples elementos (típicamente manteniendo presionado Ctrl o Cmd mientras hacen clic). Ten en cuenta que esto cambia la apariencia visual y el modelo de interacción del control, así que asegúrate de que se ajuste a tu diseño y caso de uso.

Ejemplos

Incorrecto: múltiples opciones selected sin multiple

Esto activa el error de validación porque dos opciones están marcadas como selected en un <select> de selección única:

<select name="color">
  <option value="red" selected>Red</option>
  <option value="green" selected>Green</option>
  <option value="blue">Blue</option>
</select>

Correcto: solo una opción selected

Si la intención es un menú desplegable de selección única, mantén selected en solo una <option>:

<select name="color">
  <option value="red" selected>Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

Correcto: múltiples opciones selected con el atributo multiple

Si la intención es permitir selección múltiple y preseleccionar más de una opción, añade el atributo multiple:

<select name="color" multiple>
  <option value="red" selected>Red</option>
  <option value="green" selected>Green</option>
  <option value="blue">Blue</option>
</select>

Correcto: sin atributo selected en absoluto

Si no necesitas ninguna opción preseleccionada, puedes omitir selected por completo. El navegador típicamente mostrará la primera <option> por defecto:

<select name="color">
  <option value="">Choose a color</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
  <option value="blue">Blue</option>
</select>

Más información:

MDN Reference

MDN Web Docs: <select>: The HTML Select element

→

WHATWG Spec

HTML Living Standard: The select element

→