Извлечение текста из тега Select в JavaScript: изучено несколько методов

При работе с веб-разработкой могут возникнуть случаи, когда вам потребуется получить выделенный текст из тега в JavaScript, сопровождая их примерами кода для каждого метода.

Метод 1: использование свойства selectedIndex

Свойство selectedIndex элемента , мы можем получить нужную опцию и извлечь ее текст.

const selectElement = document.getElementById('mySelect');
const selectedOption = selectElement.options[selectElement.selectedIndex];
const selectedText = selectedOption.text;
console.log(selectedText);

Метод 2. Использование свойства value

Свойство value элемента допускает множественный выбор (с использованием атрибута multiple), мы можем использовать свойство selectedOptions для доступа к массиву выбранных параметров.. Затем мы можем перебрать коллекцию, чтобы извлечь текст каждого выбранного параметра.

const selectElement = document.getElementById('mySelect');
const selectedOptions = selectElement.selectedOptions;
// Extract the text of each selected option
const selectedTexts = Array.from(selectedOptions).map(option => option.text);
console.log(selectedTexts);

Метод 4. Получение выделенного текста с помощью jQuery

Если вы используете jQuery в своем проекте, вы можете использовать его мощные селекторы и методы, чтобы упростить извлечение выделенного текста.

const selectedText = $('#mySelect option:selected').text();
console.log(selectedText);

В этой статье мы рассмотрели различные методы извлечения текста из тега .

Не забудьте учитывать структуру и поведение тега