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 Standard # dom-select-selectedindex-dev |
Browser compatibility
BCD tables only load in the browser