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

Решение: получение текста выбранной опции в jQuery

Ваша проблема типична для начинающих — вы почти у цели! Метод $('#mySelect option:selected').text() — это правильный способ получить текст, но есть нюанс: его нужно вызывать после того, как пользователь сделал выбор. Если вы вызываете его сразу при загрузке страницы, он может вернуть пустую строку, потому что ни одна опция еще не выбрана (или первая опция не имеет текста).

Давайте разберем два варианта:

1. Получение текста при изменении выбора (событие change)

// Слушаем событие 'change' на селекте
$('#mySelect').on('change', function() {
  // Получаем текст выбранной опции
  var selectedText = $(this).find('option:selected').text();
  console.log('Выбранный текст:', selectedText);
});

В этом коде:

• $(this) — ссылается на сам элемент <select> внутри обработчика.
• .find('option:selected') — находит выбранную опцию внутри этого селекта.
• .text() — извлекает её текстовое содержимое.

2. Получение текста в любой момент (например, по клику на кнопку)

$('#getTextBtn').on('click', function() {
  var selectedText = $('#mySelect option:selected').text();
  alert('Вы выбрали: ' + selectedText);
});

Полный рабочий пример

<!DOCTYPE html>
<html>
<head>
  <script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
</head>
<body>
  <select id="mySelect">
    <option value="1">Яблоко</option>
    <option value="2">Груша</option>
    <option value="3">Банан</option>
  </select>
  <button id="getTextBtn">Получить текст</button>
  <p id="result"></p>

  <script>
    // Вариант 1: при изменении выбора
    $('#mySelect').on('change', function() {
      var text = $(this).find('option:selected').text();
      $('#result').text('Выбрано: ' + text);
    });

    // Вариант 2: по клику на кнопку
    $('#getTextBtn').on('click', function() {
      var text = $('#mySelect option:selected').text();
      $('#result').text('По кнопке: ' + text);
    });
  </script>
</body>
</html>

Почему ваш код не работал?

Вероятно, вы вызывали $('#mySelect option:selected').text() сразу после загрузки страницы, когда ни одна опция не была выбрана (или первая опция была выбрана по умолчанию, но селектор не срабатывал из-за отсутствия события). jQuery работает корректно, но вы должны «сказать» ему, когда именно читать значение — после действия пользователя.

Дополнительный совет: получение и value, и текста

Часто нужно и то, и другое:

$('#mySelect').on('change', function() {
  var value = $(this).val();        // "2"
  var text = $(this).find('option:selected').text(); // "Груша"
  console.log('Value:', value, 'Text:', text);
});

Используйте .val() для получения атрибута value и .text() для видимого текста. Оба метода работают отлично — главное, не забывайте про событие!

const select = document.getElementById('mySelect');

select.addEventListener('change', function() {
  // Получаем выбранную опцию
  const selectedOption = this.options[this.selectedIndex];
  // Текст опции
  const text = selectedOption.textContent;
  // Значение (value)
  const value = selectedOption.value;
  
  console.log('Текст:', text, '| Значение:', value);
});