Как получить выбранное значение из выпадающего списка на JavaScript: полный разбор

Хватит гадать: как на JavaScript достать выбранное значение из dropdown?

Вы когда-нибудь сталкивались с ситуацией, когда пользователь выбирает что-то в выпадающем списке на сайте, а ваша программа никак не может это "увидеть"? Знакомо, правда? Это один из самых частых вопросов на Stack Overflow (и не зря!), который задают тысячи начинающих и даже опытных разработчиков. Казалось бы, что там сложного? Но нюансы есть, и сегодня мы разберем их раз и навсегда.

В этой статье я покажу вам не один, а несколько способов, как получить выбранное значение из dropdown на чистом JavaScript. Вы узнаете, чем отличается value от selectedIndex, как обрабатывать событие выбора и как не попасть в ловушку с мультиселектом. Поехали!

Самый простой способ: свойство value

Представьте, что у вас есть обычный HTML-селект:

<select id="city">
  <option value="moscow">Москва</option>
  <option value="spb">Санкт-Петербург</option>
  <option value="kazan">Казань</option>
</select>

Чтобы получить выбранное значение, нам нужно сделать всего две вещи:

1. Найти элемент <select> в DOM.
2. Прочитать его свойство value.

Вот как это выглядит в коде:

const selectElement = document.getElementById('city');
const selectedValue = selectElement.value;

console.log(selectedValue); // Выведет, например, "spb"

Важно! Свойство value у элемента <select> автоматически возвращает атрибут value у выбранного в данный момент <option>. Это самый простой и рекомендуемый способ, если вам нужно именно значение, а не текст.

А если нужно получить текст выбранного пункта?

Иногда нам нужно не значение, а то, что видит пользователь (например, "Москва" вместо "moscow"). Для этого есть свойство textContent (или innerText) у выбранной опции. Но сначала нужно получить саму опцию:

const selectElement = document.getElementById('city');
const selectedOption = selectElement.options[selectElement.selectedIndex];
const selectedText = selectedOption.textContent;

console.log(selectedText); // Выведет "Москва"

Здесь мы используем selectedIndex — это индекс выбранного элемента (начиная с 0). Потом обращаемся к коллекции options и берем нужный элемент.

Как реагировать на изменение выбора в реальном времени?

Просто получить значение один раз — это хорошо, но чаще всего нужно что-то делать, когда пользователь меняет выбор. Для этого используем событие change:

const selectElement = document.getElementById('city');

selectElement.addEventListener('change', function() {
  const selectedValue = selectElement.value;
  const selectedText = selectElement.options[selectElement.selectedIndex].textContent;
  
  console.log('Выбрано значение:', selectedValue);
  console.log('Выбран текст:', selectedText);
});

Теперь каждый раз, когда пользователь меняет город в выпадающем списке, мы моментально получаем обновленные данные. Удобно, правда?

Особый случай: мультиселекты (multiple select)

А что если у вас выпадающий список с множественным выбором? Например:

<select id="skills" multiple>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  <option value="js">JavaScript</option>
</select>

В этом случае selectElement.value вернет только первое выбранное значение, а не все. Чтобы получить все выбранные пункты, нужно перебрать коллекцию options:

const selectElement = document.getElementById('skills');
const selectedValues = [];

for (let option of selectElement.options) {
  if (option.selected) {
    selectedValues.push(option.value);
  }
}

console.log(selectedValues); // ["html", "js"]

Или более современный способ с использованием Array.from и filter:

const selectedValues = Array.from(selectElement.options)
  .filter(option => option.selected)
  .map(option => option.value);

console.log(selectedValues); // ["css", "js"]

Почему мой код не работает? Частые ошибки новичков

Давайте разберем типичные грабли, на которые наступают почти все:

Ошибка 1: Код выполняется до загрузки DOM

Если ваш скрипт находится в <head> или в начале <body>, то элемент <select> еще не существует в момент выполнения кода. Решение: оберните код в DOMContentLoaded или поместите скрипт в конце страницы.

document.addEventListener('DOMContentLoaded', function() {
  // Теперь можно безопасно работать с DOM
  const selectElement = document.getElementById('city');
  console.log(selectElement.value);
});

Ошибка 2: Путаница между value и textContent

Помните: selectElement.value возвращает атрибут value из <option>. Если у опции нет атрибута value, то вернется ее текстовое содержимое. Но лучше всегда явно указывать value для надежности.

Ошибка 3: Игнорирование первого пустого пункта

Часто делают так:

<select>
  <option value="">-- Выберите город --</option>
  <option value="moscow">Москва</option>
</select>

Если пользователь не сделал выбор, value будет пустой строкой. Не забудьте это проверить!

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

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

<select id="city">
  <option value="">-- Выберите город --</option>
  <option value="moscow">Москва</option>
  <option value="spb">Санкт-Петербург</option>
  <option value="kazan">Казань</option>
</select>

<div id="info"></div>

<script>
  const cityInfo = {
    moscow: 'Столица России, основана в 1147 году.',
    spb: 'Северная столица, основана в 1703 году.',
    kazan: 'Столица Татарстана, основана в 1005 году.'
  };

  const selectElement = document.getElementById('city');
  const infoElement = document.getElementById('info');

  selectElement.addEventListener('change', function() {
    const