selectedIndex Property in JavaScript

The selectedIndex property tells you which option is selected in a native HTML <select> element. Its value is a zero-based index, so the first option is 0; when no option is selected, it is -1. You can read it to find the chosen option, assign an index to change the selection, and use a change event to respond to user input.

What selectedIndex Returns

selectedIndex belongs to the select element, not to an individual option. It identifies the first selected option in the element’s options collection. That distinction matters for a multiple select: several options can be selected, but selectedIndex still reports only the first selected option’s index. To inspect every selected option, check each option’s selected property instead.

Indexes start at zero. For a select with Apple, Banana, and Cherry in that order, selecting Banana gives an index of 1. If the select has no selected option, the property returns -1.

Read the Selected Option

First get the select element, then use its selectedIndex to access the corresponding option. The option’s value is usually the useful form or application data; its text is the label shown to the reader. Give options explicit values when the submitted value should differ from the visible label.

Run this example:

const selectElement = {
  selectedIndex: 1,
  options: [
    { value: "apple", text: "Apple" },
    { value: "banana", text: "Banana" },
    { value: "cherry", text: "Cherry" }
  ]
};

const index = selectElement.selectedIndex;
const selectedOption = selectElement.options[index];
console.log(`Index: ${index}; value: ${selectedOption.value}`);

Index: 1; value: banana

The example prints the selected option’s zero-based index and value. In a browser, selectElement is the actual element returned by a DOM lookup, such as document.getElementById("fruitSelect"); the same property and options[index] access apply. Check for index === -1 before indexing if the select may have no selection.

Set the Selected Option

Assign an index to select that option programmatically. For example, setting selectElement.selectedIndex = 1 selects the second option. This is useful when initializing a form from saved data or resetting a control to a known choice. The index must refer to an option in the select; assigning an index outside the available options leaves no option selected, so the property reads back as -1.

Assign -1 to clear the selection. This is useful when the form should require the user to make a fresh choice, though a required select and its placeholder option may be a better fit for many forms. Setting the property changes the control’s selection; code that needs to update related page content should call the same update logic used by its event handler.

Respond to Selection Changes

Listen for the select element’s change event to react after a user chooses another option. Read the selected option inside the handler, guard against -1, and update the page using the option’s value:

<label for="animalSelect">Animal</label>
<select id="animalSelect">
  <option value="dog">Dog</option>
  <option value="cat">Cat</option>
  <option value="rabbit">Rabbit</option>
</select>
<p id="animalOutput" aria-live="polite"></p>
<script>
  const animalSelect = document.getElementById("animalSelect");
  const animalOutput = document.getElementById("animalOutput");

  animalSelect.addEventListener("change", () => {
    const index = animalSelect.selectedIndex;
    animalOutput.textContent = index === -1
      ? "No animal selected"
      : `You selected: ${animalSelect.options[index].value}`;
  });
</script>

This is browser-page source, not a runtime output demonstration. The handler reads the current selection when the event fires and writes plain text into the page. If other code changes selectedIndex, dispatching or handling that change is a separate step; assigning the property does not itself mean this handler’s page update has run.

Handle No Selection and Multiple Selections

Always account for -1 before using the index to access options[index], because that lookup does not identify a selected option when nothing is selected. An out-of-range assignment also results in no selected option. For a normal single select, selectedIndex is a convenient way to get the chosen option’s index and value.

For a select with the multiple attribute, selectedIndex identifies only the first selected option, not the full selection. Iterate through selectElement.options and keep options whose selected property is true when you need all selected values. This also naturally produces no values when nothing is selected. Use selectedIndex when the task is specifically about the first selected option or when the control permits only one choice.