Отримання тексту вибраного <option> в елементі <select>

У наступному:

<select id="test">
    <option value="1">Test One</option>
    <option value="2">Test Two</option>
</select>

Як я можу отримати текст вибраної опції (тобто "Тест один" або "Тест два") за допомогою JavaScript

document.getElementsById('test').selectedValue повертає 1 або 2, яке властивість повертає текст вибраної опції?

function getSelectedText(elementId) {
    var elt = document.getElementById(elementId);

    if (elt.selectedIndex == -1)
        return null;

    return elt.options[elt.selectedIndex].text;
}

var text = getSelectedText('test');

Якщо ви використовуєте jQuery, ви можете написати наступний код:

$("#selectId option:selected").html();

document.getElementById('test').options[document.getElementById('test').selectedIndex].text;

Під HTML5 ви можете це зробити:

document.getElementById('test').selectedOptions[0].text

Документація MDN за адресою https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions вказує на повну підтримку крос-браузера (щонайменше з грудня 2017 року), включаючи браузери Chrome, Firefox, Edge та мобільні пристрої. , але виключаючи Internet Explorer.

selectElement.options[selectElement.selectedIndex].text;

Список літератури:

• колекція параметрів, вибрано властивістьIndex: HTML DOM Виберіть об'єкт
• властивість тексту: HTML DOM Option Option
• точно відповідь на це запитання: Властивість тексту тексту

optionsВластивість містить всі <options>- звідти ви можете подивитися на.text

document.getElementById('test').options[0].text == 'Text One'

Ви можете скористатися selectedIndexдля отримання поточного вибраного option:

el = document.getElementById('elemId')
selectedText = el.options[el.selectedIndex].text

this.options [this.selectedIndex] .innerText

Якщо ви знайшли цей потік і хочете знати, як отримати вибраний текст опції через подію, ось зразок коду:

alert(event.target.options[event.target.selectedIndex].text);

Використовуйте об’єкт списку select, щоб визначити власний індекс вибраних параметрів. Звідти - захопіть внутрішній HTML цього індексу. А тепер у вас є текстовий рядок цього параметра.

<select onchange="alert(this.options[this.selectedIndex].innerHTML);">
       <option value="">Select Actions</option>
       <option value="1">Print PDF</option>
       <option value="2">Send Message</option>
       <option value="3">Request Review</option>
       <option value="4">Other Possible Actions</option>
    </select>

Схожий на @artur просто без jQuery, з простим javascript:

// Використання змінної "elt" @ Sean -right

var selection=elt.options[elt.selectedIndex].innerHTML;

Легкий, простий спосіб:

const select = document.getElementById('selectID');
const selectedOption = [...select.options].find(option => option.selected).text;