Pobieranie tekstu wybranej opcji <option> w elemencie <select>

W następującym:

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

Jak uzyskać tekst wybranej opcji (np. „Test One” lub „Test Two”) przy użyciu JavaScript

document.getElementsById('test').selectedValue zwraca 1 lub 2, jaka właściwość zwraca tekst wybranej opcji?

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

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

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

var text = getSelectedText('test');

Jeśli używasz jQuery, możesz napisać następujący kod:

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

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

W HTML5 możesz to zrobić:

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

Dokumentacja MDN pod adresem https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions wskazuje na pełną obsługę różnych przeglądarek (od co najmniej grudnia 2017 r.), W tym przeglądarek Chrome, Firefox, Edge i mobilnych , ale z wyłączeniem Internet Explorera.

selectElement.options[selectElement.selectedIndex].text;

Bibliografia:

• kolekcja opcji, właściwość selectedIndex: HTML DOM Select Object
• właściwość text: Obiekt opcji HTML DOM
• dokładnie odpowiedź na to pytanie: Tekst opcji Właściwość

optionsWłaściwość zawiera wszystko <options>- stamtąd można spojrzeć na.text

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

Możesz użyć, selectedIndexaby pobrać aktualnie wybrane option:

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

this.options [this.selectedIndex] .innerText

Jeśli znalazłeś ten wątek i chciałeś wiedzieć, jak uzyskać tekst wybranej opcji za pośrednictwem zdarzenia, oto przykładowy kod:

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

Użyj obiektu listy wyboru, aby zidentyfikować własny indeks wybranych opcji. Stamtąd - pobierz wewnętrzny kod HTML tego indeksu. A teraz masz ciąg tekstowy tej opcji.

<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>

Podobny do @artur tylko bez jQuery, z prostym javascriptem:

// Używanie zmiennej „elt” @ Seana-brighta

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

Łatwy, prosty sposób:

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