Abrufen des Textes der ausgewählten <Option> im <Auswahl> -Element

Im Folgenden:

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

Wie kann ich den Text der ausgewählten Option (dh "Test Eins" oder "Test Zwei") mit JavaScript abrufen?

document.getElementsById('test').selectedValue Gibt 1 oder 2 zurück. Welche Eigenschaft gibt den Text der ausgewählten Option zurück?

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

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

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

var text = getSelectedText('test');

Wenn Sie jQuery verwenden, können Sie den folgenden Code schreiben:

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

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

selectElement.options[selectElement.selectedIndex].text;

Verweise:

• Optionssammlung, selectedIndex-Eigenschaft: HTML DOM Select Object
• Texteigenschaft: HTML-DOM-Optionsobjekt
• genau die Antwort auf diese Frage: Optionstext Eigenschaft

Unter HTML5 können Sie dies tun:

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

Die Dokumentation von MDN unter https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions weist auf eine vollständige browserübergreifende Unterstützung (Stand: mindestens Dezember 2017) hin, einschließlich Chrome, Firefox, Edge und mobiler Browser , aber ohne Internet Explorer.

Die optionsEigenschaft enthält alle <options>- von dort können Sie sehen.text

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

Sie können verwenden selectedIndex, um den aktuell ausgewählten abzurufen option:

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

this.options [this.selectedIndex] .innerText

Wenn Sie diesen Thread gefunden haben und wissen möchten, wie Sie den ausgewählten Optionstext über das Ereignis erhalten, finden Sie hier einen Beispielcode:

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

Verwenden Sie das Auswahllistenobjekt, um den eigenen ausgewählten Optionsindex zu identifizieren. Von dort aus - holen Sie sich den inneren HTML-Code dieses Index. Und jetzt haben Sie die Textzeichenfolge dieser Option.

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

Ähnlich wie bei @artur, nur ohne jQuery, mit einfachem Javascript:

// Verwenden der Variablen "elt" von @ Sean-bright

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

Einfach, einfach:

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