Получение текста выбранной опции в dropdown JavaScript

Быстрый ответ

Для того чтобы определить, какой текст выбран в выпадающем списке <select>, можно воспользоваться возможностями JavaScript:

var selectedText = document.querySelector('#mySelect').selectedOptions[0].text;

Теперь текст активного пункта выпадающего списка с id mySelect сохраняется в переменной selectedText.

Извлечение текста в реальном времени при изменении выбора

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

document.getElementById('mySelect').addEventListener('change', function() {
  alert(this.options[this.selectedIndex].text);
});

Визуализация

Представим ситуацию, где вас ожидают несколько вариантов выбора, но лишь один заслуживает особого акцента:

Варианты: [🤵, 🌟, 🧑‍🚀, 🧙‍♂️]

Выберите этот специфический вариант с помощью JavaScript:

let selectedPerformer = document.querySelector('select').selectedOptions[0].text;

В центре внимания: [ , 🌟, , ]

Теперь "свет прожектора" направлен на текст нашего выбранного элемента.

Извлечение текста, используя атрибут value

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

var selectedText = document.querySelector('#mySelect').value;

Но помните, что этот подход эффективен только в случаях, когда value и отображаемый текст совпадают.

Подробнее об этом расскажет наш спикер на видео

Улучшение пользовательского опыта с помощью ясных меток

Для повышения ясности пользовательского интерфейса, особенно для форм, используйте комбинацию элементов label и select:

<label for="mySelect">Ваш выбор:</label>
<select id="mySelect">
  <!-- здесь могут быть ваши варианты -->
</select>

Ясные метки помогают пользователям быстрее ориентироваться, а разработчикам — проще осуществлять обращение к элементам.

Универсальная функция для работы с несколькими выпадающими списками

При наличии нескольких списков на одной странице, может быть полезной следующая функция:

function getSelectedText(elementId) {
  let dropdown = document.getElementById(elementId);
  return dropdown.options[dropdown.selectedIndex].text;
}

var chosenText1 = getSelectedText('dropdown1');
var chosenText2 = getSelectedText('dropdown2');

Полезные материалы

1. <select>: HTML-элемент выбора – MDN — подробно об элементе <select>.
2. Метод querySelector() HTML DOM Document — основы выбора элементов документа.
3. Как получить выбранное значение выпадающего списка с помощью JavaScript – Stack Overflow — обсуждения и рекомендации программистов.
4. Свойства и методы формы — подробный анализ управления формами и их элементами в JavaScript.
5. Стандартное оформление выпадающих списков | CSS-Tricks — тонкости стилизации элементов <select>.
6. .val() | Документация jQuery API — руководство по использованию метода .val() в jQuery для работы с элементами форм.