In order to access this site you need to enable JavaScript!

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

selected property (option)

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.

If you need to detect when an option becomes selected, or in other words, when the selection has changed in a select element, use the onchange event.

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. If there is no element selected by default in a drop-down list, the first option will be selected.

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 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 you need the value of the selected option in a single-selection list, you can use the value property of the select element.
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 Example 3 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 type="text/javascript">
        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>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 4:

This example displays the text of the selected items in a multiple-selection list:

<head>
    <script type="text/javascript">
        function GetSelected (selectTag) {
            var selIndexes = "";

            for (var i = 0; i < selectTag.options.length; i++) {
                var optionTag = selectTag.options[i];
                if (optionTag.selected) {
                    if (selIndexes.length > 0)
                        selIndexes += ", ";
                    selIndexes += optionTag.text;
                }
            }

            var info = document.getElementById ("info");
            if (selIndexes.length > 0) {
                info.innerHTML = "Selected options: " + selIndexes;
            }
            else {
                info.innerHTML = "There is no selected option";
            }
        }
    </script>
</head>
<body>
    Please select some options (use the CTRL key for multiple selection)
    <br />
    <select multiple="multiple" onchange="GetSelected (this);">
        <option>Apple</option>
        <option>Peach</option>
        <option>Pear</option>
    </select>
    <br /><br />

    <span id="info" style="border:1px solid #606060; background-color:#e0d0e0;"></span>
</body>

Copy Code

Preview

Syntax Highlighter

Did you find this example helpful? yes no

Example HTML code 5:

This example is similar to the previous one but it displays the value of the selected items in a multiple-selection list:

<head>
    <script type="text/javascript">
        function GetSelected (selectTag) {
            var selIndexes = "";

            for (var i = 0; i < selectTag.options.length; i++) {
                var optionTag = selectTag.options[i];
                if (optionTag.selected) {
                    if (selIndexes.length > 0)
                        selIndexes += ", ";
                    selIndexes += optionTag.value;
                }
            }

            var info = document.getElementById ("info");
            if (selIndexes.length > 0) {
                info.innerHTML = "Selected options: " + selIndexes;
            }
            else {
                info.innerHTML = "There is no selected option";
            }
        }
    </script>
</head>
<body>
    Please select some options (use the CTRL key for multiple selection)
    <br />
    <select multiple="multiple" onchange="GetSelected (this);">
        <option value="Apple">Apple</option>
        <option value="Peach">Peach</option>
        <option value="Pear">Pear</option>
    </select>
    <br /><br />

    <span id="info" style="border:1px solid #606060; background-color:#e0d0e0;"></span>
</body>