HTMLSelectElement: selectedIndex property
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.
The selectedIndex
property of the HTMLSelectElement
interface is the numeric index of the first selected <option>
element in a <select>
element, if any, or −1
if no <option>
is selected. Setting this property selects the option at that index and deselects all other options, while setting it to -1
deselects any currently selected options.
Value
A number.
Examples
HTML
html
<p id="p">selectedIndex: 0</p>
<select id="select">
<option selected>Option A</option>
<option>Option B</option>
<option>Option C</option>
<option>Option D</option>
<option>Option E</option>
</select>
JavaScript
js
const selectElem = document.getElementById("select");
const pElem = document.getElementById("p");
// When a new <option> is selected
selectElem.addEventListener("change", () => {
const index = selectElem.selectedIndex;
// Add that data to the <p>
pElem.textContent = `selectedIndex: ${index}`;
});
Specifications
Specification |
---|
HTML # dom-select-selectedindex-dev |
Browser compatibility
Report problems with this compatibility data on GitHubdesktop | mobile | |||||||||||
---|---|---|---|---|---|---|---|---|---|---|---|---|
selectedIndex |
Legend
Tip: you can click/tap on a cell for more information.
- Full support
- Full support
The compatibility table on this page is generated from structured data. If you'd like to contribute to the data, please check out https://github.com/mdn/browser-compat-data and send us a pull request.