You are here: Reference > JavaScript > client-side > HTML DOM > properties > selected (option)

selected property (option)

A A

Font size

Browser support:

Sets or retrieves the state of an option element.

The SELECTED attribute in HTML and the selected property in JavaScript work differently. You can set the initial state with the SELECTED attribute, while the selected property contains the actual state of the option. If you want to get or set the initial state in JavaScript, use the defaultSelected property.

The select element allows simple or multiple selection, depending on the state of the multiple property.

If multiple selection is allowed, the visual appearance of the selection list can only be a list box.
If only one selected element is allowed, the selection list may be a drop-down list or a list box. The default appearance is the drop-down list.

You can set the count of the visible rows in a selection list with the size property.

If the value of the size property is greater than one, the appearance of the selection list is a list box.

In a non-empty drop-down list always exactly one selected element exists. In a single-selection list box the count of the selected items can be 0 (if the list box has no selected element by default) or 1.

In a multiple-selection list box the count of the selected items may range from 0 to the number of the items. If there is no element selected by default in a drop-down list, the first option will be selected.

If only one selected element is allowed in the selection list, the selectedIndex property contains the index of the selected item in the options collection of the tag. If multiple selection is allowed, you can get the selected elements by iterating through the options collection of the tag and check the value of the selected property of every option tag.

See the third example for details.

If there is no selected element, the value of the selectedIndex property is -1.

Syntax:

object.selected;

You can find the related objects in the Supported by objects section below.

This property is read/write.

HTML page for this property: SELECTED

Possible values:

Boolean that indicates the selected state of the object.

One of the following values:

false

The option is not selected.

true

The option is selected.

Default: false.

Example HTML code 1:

This example illustrates the use of the SELECTED attribute in a single-selection list:

<select>
    <option value="Apple" />Apple
    <option value="Pear" />Pear
    <option value="Peach" selected="selected" />Peach
</select>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 2:

This example illustrates the use of the SELECTED attribute in a multiple-selection list:

<select multiple="multiple" size="3">
    <option value="Apple" selected="selected" />Apple
    <option value="Pear" />Pear
    <option value="Peach" selected="selected" />Peach
</select>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 3:

This example illustrates the use of the selected property in a multiple-selection list:

<head>
    <script>
        function GetSelected () {
            var select = document.getElementById ("mySelect");
            var txt = "";
            for (var i = 0; i < select.options.length; i++) {
                var isSelected = select.options[i].selected;
                isSelected = (isSelected)? "selected" : "not selected";
                txt += "The " + i + " option is " + isSelected + "\n";
            }
            alert (txt);
        }
    </script>
</head>
<body>
    <select id="mySelect" size="3" multiple="multiple">
        <option value="Apple" selected="selected" />Apple
        <option value="Pear" />Pear
        <option value="Peach" selected="selected" />Peach
    </select>

    <button onClick="GetSelected ();">Get the selected options!</button>
</body>