What happens if I change attribute “selected” on an <option> element via Javascript?

Question

What is supposed to happen if I change the attribute "selected" on an <option> element via Javascript?

Example

HTML

<select size="1" id="myselect">
  <option>pepper</option>
  <option selected="selected">salt</option>
</select>

Javascript

    var selectObj = document.getElementById('myselect');
    selectObj.options[1].removeAttribute('selected');
    selectObj.options[0].setAttribute('selected','selected');

Live example on JSFiddle.net .

I could not find any documentation on what this is supposed to do (though it seems to change the selected option in the dropdown box).

I tried it in Firefox, and found that setting the attribute on an <option> sometimes selects that option, and sometimes not, while in Chrome it always works. So what is it supposed to do? Is this described in any spec?

Note:

I know that I can change the selection via JS using eg option.selected=true/false or select.value=<newval> . So my problem is not to find out how to change the selection; I just want to understand what happens if I manipulate the attribute.

Answer 1

The HTML 5.1 spec says, for the option element

The selectedness of an option element is a boolean state, initially false. ... Whenever an option element's selected attribute is added, its selectedness must be set to true.

So when setAttribute("selected", ...) is called, the content attribute gains the attribute value, and the element's "selectedness" state MAY change. Note though that it says that an option element's selectedness is set to true when the element selected attribute is added . Which means that if you call setAttribute('selected','selected') on an element that already has the selected attribute, it is not required that selectedness of the element or any other option element changes.

What follows then are the consequences of changing the element's "selectedness".

The selected IDL attribute, on getting, must return true if the element's selectedness is true, and false otherwise.

(If you're not familiar with the terminology, an "IDL attribute" is what most people think of as a "property". eg opt.selected )

Then, for the select element it says:

If the multiple attribute is absent, whenever an option element in the select element's list of options has its selectedness set to true, ... the user agent must set the selectedness of all the other option elements in its list of options to false.

and

The selectedOptions IDL attribute must return an HTMLCollection rooted at the select node, whose filter matches the elements in the list of options that have their selectedness set to true.

The selectedIndex IDL attribute, on getting, must return the index of the first option element in the list of options in tree order that has its selectedness set to true, if any. If there isn't one, then it must return −1.

The value IDL attribute, on getting, must return the value of the first option element in the list of options in tree order that has its selectedness set to true, if any. If there isn't one, then it must return the empty string.

and on submitting the form, during constructing the form data set :

If the field element is a select element, then for each option element in the select element's list of options whose selectedness is true and that is not disabled, append an entry to the form data set with the name as the name, the value of the option element as the value, and type as the type.

Does that cover what you need to know?