Получение текста выбранной опции в dropdown JavaScript
Быстрый ответ
Для того чтобы определить, какой текст выбран в выпадающем списке <select>
, можно воспользоваться возможностями JavaScript:
var selectedText = document.querySelector('#mySelect').selectedOptions[0].text;
Теперь текст активного пункта выпадающего списка с id mySelect
сохраняется в переменной selectedText
.
[AsideBanner]
Извлечение текста в реальном времени при изменении выбора
Привяжите обработчик событий к событию 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');
Полезные материалы
- <select>: HTML-элемент выбора – MDN — подробно об элементе
<select>
. - Метод querySelector() HTML DOM Document — основы выбора элементов документа.
- Как получить выбранное значение выпадающего списка с помощью JavaScript – Stack Overflow — обсуждения и рекомендации программистов.
- Свойства и методы формы — подробный анализ управления формами и их элементами в JavaScript.
- Стандартное оформление выпадающих списков | CSS-Tricks — тонкости стилизации элементов
<select>
. - .val() | Документация jQuery API — руководство по использованию метода
.val()
в jQuery для работы с элементами форм.