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?

Answer 1

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.

Answer 2

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.

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

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.

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.

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.

Answer 7

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

Answer 8

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