Recupero del testo dell'elemento <option> selezionato in <select>

Nel seguente:

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

Come posso ottenere il testo dell'opzione selezionata (ad esempio "Test One" o "Test Two") usando JavaScript

document.getElementsById('test').selectedValue restituisce 1 o 2, quale proprietà restituisce il testo dell'opzione selezionata?

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

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

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

var text = getSelectedText('test');

Se usi jQuery puoi scrivere il seguente codice:

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

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

In HTML5 sei in grado di farlo:

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

La documentazione di MDN su https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions indica il supporto completo per più browser (almeno a dicembre 2017), inclusi Chrome, Firefox, Edge e browser mobili , ma escluso Internet Explorer.

selectElement.options[selectElement.selectedIndex].text;

Riferimenti:

• raccolta di opzioni, proprietà selectedIndex: HTML DOM Select Object
• proprietà text: oggetto opzione DOM HTML HTML
• esattamente la risposta a questa domanda: Opzione testo Proprietà

La optionsproprietà contiene tutto il <options>- da lì puoi guardare.text

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

È possibile utilizzare selectedIndexper recuperare l'attuale selezionato option:

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

this.options [this.selectedIndex] .innerText

Se hai trovato questa discussione e volevi sapere come ottenere il testo dell'opzione selezionata tramite evento, ecco il codice di esempio:

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

Utilizzare l'oggetto elenco di selezione, per identificare il proprio indice delle opzioni selezionate. Da lì: prendi l'HTML interno di quell'indice. E ora hai la stringa di testo di quell'opzione.

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

Simile a @artur solo senza jQuery, con javascript semplice:

// Utilizzo della variabile "elt" di @ Sean-bright

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

Modo semplice e semplice:

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