Свойство selectedIndex в JavaScript

Свойство selectedIndex содержит индекс первого выбранного пункта внутри select. Индексы начинаются с нуля, а значение -1 означает, что ни один option не выбран.

const index = select.selectedIndex;
select.selectedIndex = 2;

selectedIndex можно читать и изменять. Это свойство, а не метод, поэтому круглые скобки после его имени не ставятся.

Получение индекса
Получение выбранного option
Изменение выбора по индексу
Значение -1 и отсутствие выбора
Отличие selectedIndex от value
selectedIndex у select multiple
Изменение списка и индексов
События и сброс формы
Итого

Получение индекса

Создадим список способов доставки:

<form class="delivery-form">
  <label for="delivery">Способ доставки</label>

  <select id="delivery" name="delivery" required>
    <option value="" selected>Выберите способ</option>
    <option value="courier">Курьер</option>
    <option value="pickup">Самовывоз</option>
    <option value="post">Почта</option>
  </select>
</form>

Получим элемент и прочитаем selectedIndex:

const deliveryForm = document.querySelector('.delivery-form');
const deliverySelect = deliveryForm.elements.delivery;

console.log(deliverySelect.selectedIndex); // 0

В исходной разметке выбран первый пункт, поэтому свойство возвращает 0. Если пользователь выберет «Самовывоз», индекс станет равен 2.

Индекс относится к коллекции select.options. В неё входят все пункты списка в порядке разметки:

console.log(deliverySelect.options[0].textContent); // Выберите способ
console.log(deliverySelect.options[1].textContent); // Курьер
console.log(deliverySelect.options[2].textContent); // Самовывоз

Получение выбранного option

По индексу можно получить сам выбранный элемент option, например чтобы прочитать текст для пользователя:

const selectedIndex = deliverySelect.selectedIndex;
const selectedOption = deliverySelect.options[selectedIndex];

console.log(selectedOption.value);
console.log(selectedOption.textContent);

Такой код работает, пока в списке обязательно есть выбор. Если selectedIndex равен -1, обращение к options[-1] вернёт undefined. Безопасный вариант сначала проверяет индекс:

const selectedIndex = deliverySelect.selectedIndex;

if (selectedIndex === -1) {
  console.log('Способ доставки не выбран');
} else {
  const selectedOption = deliverySelect.options[selectedIndex];
  console.log(selectedOption.textContent);
}

Если нужен только value, обращаться к индексу не требуется. Текущее значение обычного списка уже доступно в deliverySelect.value.

Изменение выбора по индексу

Присваивание допустимого индекса выбирает соответствующий пункт:

deliverySelect.selectedIndex = 2;

console.log(deliverySelect.value); // pickup
console.log(deliverySelect.options[2].selected); // true

Предыдущий выбранный пункт будет снят. То же состояние можно получить, присвоив значение свойству value или установив selected = true нужному option.

Индекс удобен, когда важна позиция пункта. Например, можно выбрать последний вариант независимо от его значения:

deliverySelect.selectedIndex = deliverySelect.options.length - 1;

console.log(deliverySelect.value); // post

Перед таким присваиванием учитывайте пустой список. Если options.length равен нулю, выражение вернёт -1 и выбор останется пустым.

Значение -1 и отсутствие выбора

Чтобы программно снять выбор со всех пунктов, присвойте -1:

deliverySelect.selectedIndex = -1;

console.log(deliverySelect.selectedIndex); // -1
console.log(deliverySelect.value); // ''

Индекс за пределами коллекции также снимает выбор:

deliverySelect.selectedIndex = 100;

console.log(deliverySelect.selectedIndex); // -1

Значение -1 отличается от выбора первого пункта с пустым value. В форме из примера у подсказки «Выберите способ» индекс равен 0, хотя её value является пустой строкой.

deliverySelect.selectedIndex = 0;

console.log(deliverySelect.selectedIndex); // 0
console.log(deliverySelect.value); // ''

Поэтому проверка selectedIndex === -1 отвечает только на вопрос о наличии выбранного option. Она не определяет, выбрал ли пользователь содержательный вариант вместо пункта-подсказки. Для такой проверки обычно смотрят на value и ограничения формы.

Отличие selectedIndex от value

selectedIndex и value описывают один выбор с разных сторон:

Свойство	Результат
`selectedIndex`	Числовая позиция первого выбранного пункта
`value`	Строковое значение выбранного пункта
`selectedOptions`	Коллекция всех выбранных пунктов

Если известны данные варианта, выбор через value обычно устойчивее:

deliverySelect.value = 'pickup';

Этот код продолжит выбирать самовывоз, даже если выше него добавить новый option. Запись selectedIndex = 2 зависит от порядка и после изменения разметки может выбрать уже другой пункт.

selectedIndex нужен, когда важна именно позиция или требуется получить элемент из коллекции options.

selectedIndex у select multiple

В списке с атрибутом multiple может быть выбрано несколько пунктов. selectedIndex возвращает индекс первого из них:

<select class="skills-select" multiple>
  <option value="html" selected>HTML</option>
  <option value="css">CSS</option>
  <option value="javascript" selected>JavaScript</option>
  <option value="git">Git</option>
</select>

const skillsSelect = document.querySelector('.skills-select');

console.log(skillsSelect.selectedIndex); // 0
console.log(skillsSelect.selectedOptions.length); // 2

Хотя выбраны пункты с индексами 0 и 2, свойство возвращает только 0. Для получения всех выбранных вариантов используют selectedOptions или проверяют свойство selected у каждого пункта.

Присваивание selectedIndex множественному списку оставляет выбранным только один указанный пункт:

skillsSelect.selectedIndex = 1;

console.log(skillsSelect.selectedOptions.length); // 1
console.log(skillsSelect.value); // css

Чтобы добавить вариант к уже выбранным, изменяйте selected конкретного option:

skillsSelect.options[3].selected = true;

Изменение списка и индексов

Индекс зависит от текущего порядка элементов option. Если добавить, удалить или переместить пункт, позиции могут измениться.

deliverySelect.value = 'pickup';
console.log(deliverySelect.selectedIndex); // 2

deliverySelect.options[0].remove();
console.log(deliverySelect.selectedIndex); // 1

Выбранным остался вариант с value=“pickup”, но после удаления первого пункта его индекс уменьшился. Поэтому не сохраняйте индекс как постоянный идентификатор варианта. Для данных приложения лучше подходит стабильное значение из option.value.

Если пункты распределены по элементам optgroup, заголовки групп не получают индексы. Коллекция options содержит только вложенные option в общем порядке.

События и сброс формы

После выбора пользователя у select возникает событие change. В обработчике selectedIndex уже содержит новую позицию:

<p class="delivery-result" aria-live="polite"></p>

const deliveryResult = document.querySelector('.delivery-result');

function updateDeliveryResult() {
  const index = deliverySelect.selectedIndex;

  deliveryResult.textContent = index === -1
    ? 'Способ доставки не выбран'
    : deliverySelect.options[index].textContent;
}

deliverySelect.addEventListener('change', updateDeliveryResult);

Присваивание selectedIndex из JavaScript не вызывает событие change. Если после программного выбора нужно обновить интерфейс, вызовите соответствующую функцию отдельно.

deliverySelect.selectedIndex = 3;
updateDeliveryResult();

Явный начальный выбор задаётся атрибутом selected и доступен в свойстве defaultSelected соответствующего пункта. Отдельного свойства defaultSelectedIndex нет. Метод reset() возвращает список к начальному выбору:

deliveryForm.reset();

console.log(deliverySelect.selectedIndex); // 0

Итого

Свойство selectedIndex содержит индекс первого выбранного option. Индексы начинаются с нуля, а -1 означает отсутствие выбора. Через коллекцию options по индексу можно получить сам выбранный пункт.

Присваивание допустимого индекса изменяет выбор, а -1 или индекс за пределами списка снимает его. У select multiple свойство учитывает только первый выбранный вариант. Поскольку индексы меняются вместе с порядком пунктов, для хранения данных обычно используют стабильный value.