What's the difference between 'selected' and 'defaultSelected' when constructing an HTMLOptionElement?

Question

From MDN:

defaultSelected - Optional
A Boolean that sets the selected attribute value, i.e. so that this will be the default value selected in the element when the page is first loaded. If this is not specified, a default value of false is used. Note that a value of true does not set the option to selected if it is not already selected.

selected - Optional
A Boolean that sets the option's selected state; the default is false (not selected). If omitted, even if the defaultSelected argument is true, the option is not selected.

This is very unclear to me. defaultSelected determines if "this will be the default value selected", but one sentence later it says "a value of true does not set the option to selected if it is not already selected". So... it doesn't set it to be selected? It only sets it to selected if it's already selected?

selected claims also to set the selected state. If it's omitted, regardless of defaultSelected, the option is not selected. So... defaultSelected does nothing?

What's going on here?

Answer 1

The defaultSelected property represents the initial (default) selection state of an element and corresponds to the selected HTML attribute. The selected property represents the current selection state and that is what a user actually sees selected in the browser.

When a user selects an option, only the selected property is changed, while the attribute and the defaultSelected property stay the same (they can still be changed programmatically though). You can use this, for instance, to reset some settings to defaults.

So I'd say you would generally use either

 new Option(text, value, true, true)

or

new Option(text, value, false, false)

Setting different values for the 3rd and the 4th parameters means you create an option which is the default value, but is not currently selected, or vice versa.

I find the docs rather confusing as well, but I guess that

defaultSelected - <...> Note that a value of true does not set the option to selected if it is not already selected

means just that - if you set the defaultSelected to true, it does not mean that the option will actually be selected, it just sets the option as the default selected value. For it to be selected you have to set the selected property as well.

Also, when you add the selected attribute in HTML, the corresponding DOM element gets both defaultSelected and selected properties set to true, so both initial and current selected values are the same.

Here is a useful answer for a related question about attributes and properties of DOM elements: https://stackoverflow.com/a/6004028/1630480