W3cubDocs

/Web APIs

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

<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

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

	Desktop					Mobile
	Chrome	Edge	Firefox	Opera	Safari	Chrome Android	Firefox for Android	Opera Android	Safari on IOS	Samsung Internet	WebView Android	WebView on iOS
`selectedIndex`	1	12	1	≤12.1	3	18	4	≤12.1	1	1.0	4.4	1