O elemento “select” não pode ter mais de um descendente “option” selecionado, a menos que o atributo “multiple” seja especificado.

O elemento <select> fornece um menu de opções para o utilizador. Por defeito, funciona como um controlo de seleção única — o utilizador pode escolher exatamente uma opção da lista. O atributo selected num elemento <option> indica qual opção deve ser pré-selecionada quando a página é carregada. Quando dois ou mais elementos <option> têm o atributo selected dentro de um <select> de escolha única, isto cria um estado inválido e contraditório: o navegador é instruído a pré-selecionar múltiplos itens num controlo que apenas suporta uma seleção.

Quando os navegadores encontram esta contradição, o seu comportamento é inconsistente. A maioria escolherá silenciosamente a última <option> marcada como selected e ignorará as outras, mas isto não é garantido pela especificação. Confiar em comportamento indefinido leva a resultados imprevisíveis entre navegadores e pode confundir tanto utilizadores como programadores sobre que valor será efetivamente submetido com um formulário.

Do ponto de vista da acessibilidade, as tecnologias assistivas podem anunciar o estado selecionado das opções aos utilizadores. Múltiplos atributos selected num <select> de escolha única podem fazer com que os leitores de ecrã forneçam informações enganosas ou confusas sobre qual opção está atualmente ativa.

A especificação HTML (WHATWG) afirma explicitamente que se o atributo multiple estiver ausente, não mais de um descendente <option> do <select> pode ter o atributo selected.

Como corrigir

Tem duas opções dependendo da sua intenção:

1. Se apenas uma opção deve ser pré-selecionada: Remova o atributo selected de todas exceto uma <option>. Isto mantém o <select> como um menu suspenso padrão de escolha única.
2. Se múltiplas opções devem ser pré-selecionadas: Adicione o atributo multiple ao elemento <select>. Isto muda o controlo de um menu suspenso para uma caixa de lista onde os utilizadores podem selecionar múltiplos itens (tipicamente segurando Ctrl ou Cmd enquanto clicam). Tenha em mente que isto muda a aparência visual e o modelo de interação do controlo, por isso certifique-se de que se adequa ao seu design e caso de uso.

Exemplos

Incorreto: múltiplas opções selected sem multiple

Isto desencadeia o erro de validação porque duas opções estão marcadas como selected num <select> de escolha única:

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

Correto: apenas uma opção selected

Se a intenção é um menu suspenso de escolha única, mantenha selected em apenas uma <option>:

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

Correto: múltiplas opções selected com o atributo multiple

Se a intenção é permitir multi-seleção e pré-selecionar mais de uma opção, adicione o atributo multiple:

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

Correto: nenhum atributo selected

Se não precisa de nenhuma opção pré-selecionada, pode omitir selected completamente. O navegador tipicamente mostrará a primeira <option> por defeito:

<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>

Saiba mais:

MDN Reference

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

→

WHATWG Spec

HTML Living Standard: The select element

→