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

Правильный способ получения значения из <select>

Ваш код почти правильный, но есть одна важная деталь: свойство value у элемента <select> работает только в современных браузерах и при условии, что у выбранного <option> есть атрибут value. В вашем примере атрибут value есть, поэтому проблема не в этом. Давайте разберёмся, почему у вас выводится undefined.

Скорее всего, ошибка связана с тем, что скрипт выполняется до того, как DOM-дерево полностью загружено. Если ваш JavaScript-код находится в <head> или в начале <body>, то элемент с id="mySelect" ещё не существует на момент выполнения функции. Чтобы это исправить, оберните вызов функции в обработчик события DOMContentLoaded или поместите скрипт в конец <body>.

Вот исправленный пример с использованием современного подхода:

<!DOCTYPE html>
<html>
<head>
  <title>Пример</title>
</head>
<body>
  <select id="mySelect">
    <option value="1">Первый вариант</option>
    <option value="2">Второй вариант</option>
    <option value="3">Третий вариант</option>
  </select>
  <button id="myButton">Показать значение</button>

  <script>
    // Ждём загрузки DOM
    document.addEventListener('DOMContentLoaded', function() {
      const select = document.getElementById('mySelect');
      const button = document.getElementById('myButton');

      button.addEventListener('click', function() {
        // Самый простой способ — использовать свойство value
        console.log('Выбранное значение:', select.value);
        // Также можно получить текст выбранного пункта
        console.log('Текст пункта:', select.options[select.selectedIndex].text);
      });
    });
  </script>
</body>
</html>

Основные способы получения данных из <select>

• Свойство value — самый простой и современный способ. Возвращает значение атрибута value выбранного <option>. Если атрибут value не задан, возвращается пустая строка.
• select.options[select.selectedIndex].value — классический способ, работает во всех браузерах. selectedIndex — индекс выбранного пункта (начиная с 0).
• select.options[select.selectedIndex].text — возвращает текст, который видит пользователь (между тегами <option> и </option>).

Дополнительные советы

Если вы хотите отслеживать изменения в реальном времени (без кнопки), используйте событие change:

select.addEventListener('change', function() {
  console.log('Новое значение:', this.value);
});

Также обратите внимание: если у вас есть множественный выбор (<select multiple>), свойство value вернёт только первое выбранное значение. В таком случае нужно перебирать select.selectedOptions:

const values = Array.from(select.selectedOptions).map(option => option.value);
console.log(values); // Массив выбранных значений

Ваш первоначальный код с select.value абсолютно верен для одиночного выбора. Убедитесь, что:

• Скрипт выполняется после загрузки DOM.
• У <option> есть атрибут value (иначе вернётся пустая строка).
• Вы используете правильный id элемента.

<select id="mySelect">
  <option data-id="101" value="1">Первый вариант</option>
  <option data-id="202" value="2">Второй вариант</option>
  <option data-id="303" value="3">Третий вариант</option>
</select>

<script>
  document.getElementById('mySelect').addEventListener('change', function() {
    const selectedOption = this.options[this.selectedIndex];
    const customId = selectedOption.dataset.id; // Получаем значение data-id
    console.log('ID из data-атрибута:', customId);
    console.log('Стандартное value:', this.value);
  });
</script>