The “select” element cannot have more than one selected “option” descendant unless the “multiple” attribute is specified.

The <select> element provides a menu of options for the user. By default, it operates as a single-selection control — the user can pick exactly one option from the list. The selected attribute on an <option> element indicates which option should be pre-selected when the page loads. When two or more <option> elements have the selected attribute inside a single-choice <select>, this creates an invalid and contradictory state: the browser is told to pre-select multiple items in a control that only supports one selection.

When browsers encounter this contradiction, their behavior is inconsistent. Most will silently pick the last <option> marked as selected and ignore the others, but this is not guaranteed by the specification. Relying on undefined behavior leads to unpredictable results across browsers and can confuse both users and developers about which value will actually be submitted with a form.

From an accessibility standpoint, assistive technologies may announce the selected state of options to users. Multiple selected attributes on a single-choice <select> can cause screen readers to provide misleading or confusing information about which option is currently active.

The HTML specification (WHATWG) explicitly states that if the multiple attribute is absent, no more than one <option> descendant of the <select> may have the selected attribute.

How to fix it

You have two options depending on your intent:

1. If only one option should be pre-selected: Remove the selected attribute from all but one <option>. This keeps the <select> as a standard single-choice dropdown.
2. If multiple options should be pre-selected: Add the multiple attribute to the <select> element. This changes the control from a dropdown to a list box where users can select multiple items (typically by holding Ctrl or Cmd while clicking). Keep in mind that this changes the visual appearance and interaction model of the control, so make sure it fits your design and use case.

Examples

Incorrect: multiple selected options without multiple

This triggers the validation error because two options are marked as selected in a single-choice <select>:

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

Correct: only one selected option

If the intent is a single-choice dropdown, keep selected on only one <option>:

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

Correct: multiple selected options with the multiple attribute

If the intent is to allow multi-selection and pre-select more than one option, add the multiple attribute:

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

Correct: no selected attribute at all

If you don’t need any option pre-selected, you can omit selected entirely. The browser will typically display the first <option> by default:

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

Learn more:

MDN Reference

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

→

WHATWG Spec

HTML Living Standard: The select element

→