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

You are here: Reference > JavaScript > client-side > HTML DOM > properties > selectedIndex (options, keygen, select)

selectedIndex property (options, keygen, select)

Browser support:

Specifies or returns the zero-based index of the selected option in a select object or in the selection list of a keygen object.

If multiple selection is allowed in the select object, than the selectedIndex property returns the index of the first selected option. If no option is selected, the selectedIndex property contains -1.

If you need to specify or retrieve the selected items in a multiple selection list box, you can use the selected property. You can find a detailed description and examples on the page for the selected property.

If you want to specify only one selected element in a multiple-selection list or a selected element in a single-selection list, you can do it in the following ways:

specify the selected element by index, with the selectedIndex property
specify the selected element by value, with the value property of the selection list
set the selected property of the proper option object to true, but it keeps the previously selected elements in a multiple-selection list

Syntax:

object.selectedIndex;

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

This property is read/write.

Possible values:

Zero-based Integer, the selected option.

Default: this property has no default value.

Example HTML code 1:

This example illustrates the use of the selectedIndex property:

<head>
    <script type="text/javascript">
        function GetSelOption (selectTag) {
            var selIdx = selectTag.selectedIndex;
            var selOption = selectTag.options[selIdx];

            alert ("The selected option is " + selOption.text);
        }
    </script>
</head>
<body>
    Change the selection in the list below:
    <select onchange="GetSelOption (this);">
        <option>Apple</option>
        <option>Peach</option>
        <option>Pear</option>
    </select>
</body>