What values can appear in the "selected" attribute of the "option" tag?

Question

I have some markup similar to the following:

<select>
  <option selected="selected">Apple</option>
  <option selected="">Orange</option>
</select>

In this case, "Orange" shows as the selected item. I would have expected making the selected attribute blank would undo its effects. Is there a way to write this without simply leaving the attribute out?

Accompanist

Answer 1

Different browser may treat this attribute differently. According to the MSDN documentation (for Internet Explorer):

To select an item in HTML, it is not necessary to set the value of the SELECTED attribute to true. The mere presence of the SELECTED attribute set its value to true.

In firefox and Safari this does work:

<option selected='false' />

From what I can tell by looking at the official WC3 standard for HTML4, the supported case is only:

<option selected='selected' />

You will either need to selectively emit the attribute, or use javascript to control which item is initially selected.

Diena

-1; this claim is false: "From what I can tell by looking at the official WC3 standard for HTML4, the supported case is only: <option selected='selected' />" On the contrary, w3.org/TR/html4/interact/forms.html#adef-selected declares selected to be a boolean attribute, and w3.org/TR/html4/intro/sgmltut.html#h-3.3.4.2 explains that it is the mere appearance of boolean attributes that implies a value of "true" or "false". <OPTION selected> is actually used as an example! – Fledgy

Doesn't work in modern browsers nowadays. – Spherulite

Answer 2

HTML5 spec

https://www.w3.org/TR/html51/sec-forms.html#the-option-element

The selected content attribute is a boolean attribute.

http://www.w3.org/TR/html5/infrastructure.html#boolean-attributes :

The presence of a boolean attribute on an element represents the true value, and the absence of the attribute represents the false value.

If the attribute is present, its value must either be the empty string or a value that is an ASCII case-insensitive match for the attribute's canonical name, with no leading or trailing whitespace.

Conclusion

The following are valid, equivalent and true:

<option selected />
<option selected="" />
<option selected="selected" />
<option selected="SeLeCtEd" />

The following are invalid:

<option selected="0" />
<option selected="1" />
<option selected="false" />
<option selected="true" />

The absence of the attribute is the only valid syntax for false:

<option />

Recommendation

If you care about writing valid XHTML, use selected="selected", since <option selected> is invalid and other alternatives are less readable. Else, just use <option selected> as it is shorter.

Rainbow

Answer 3

the only allowed value for selected attribute in XHTML is "selected" so if you want your markup to be XHTML compliant and work across all browsers leaving it out is the only choice to make it unselected

Huffish

Answer 4

In HTML (as opposed to XHTML) a simple selected attribute, with no value at all, works fine:

<option selected>Apple</option>
<option>Orange</option>

In XHTML (including XHTML5) you need a value, which should also be selected:

<option selected="selected">Apple</option>
<option>Orange</option>

This also works fine in HTML.

This is generally the case for boolean values in (X)HTML. The way to set them to false is to omit them altogether. Setting values of true and false may work, but is nonstandard.

Note that for a list of options, the first is selected by default, so this isn't necessary at all in this case.

Distrain

Answer 5

Nope, the existence of the selected attribute tells the browser that it is the selected item. Anything inside the quotes is ignored.

Edit: What you could do (with Javascript) is look for option tags with selected="", and remove the selected attribute from them.

Peterec

Answer 6

According to w3schools, you should be setting it as: selected="selected". This tells you which option is initially selected, and allows you to set it through script later.

Tautog

Answer 7

There aren't any other valid values other than "selected" for that attribute. (http://www.w3schools.com/TAGS/att_option_selected.asp)

Duvall

Answer 8

You are better off setting the selectElement.selectedIndex property from Javascript, or removing the attribute altogether.

Radius

Down vote reason: Don't see why you'd ever be better off doing something in JS that there is support for in markup. – Duodenary

@WaldenLeverich First, this is a really old question: HTML5 and "modern" browsers didn't exist, so the layer of compatibility was JS. Second, I mentioned removing the attribute: the only consistent way to disable selection. – Radius

@Jeff: “this is a really old question: HTML5 and "modern" browsers didn't exist” — the HTML5 spec certainly did, and work on it had been ongoing for some years. – Sulfonal

It was wrong a year ago, and it’s still wrong today! We can’t just let people be wrong on the internet. – Sulfonal

@PaulD.Waite Please identify what is wrong about either my answer, or my comment from Oct 2016? – Radius

@PaulD.Waite actually, please don't spend any more time on this. Our time is better spent correcting actual problems in the real world. – Radius