wake-up-neo.com

Den Text des ausgewählten <Option> im <select> -Element abrufen

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 (z. B. "Test Eins" oder "Test Zwei") mithilfe von JavaScript abrufen?

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

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

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

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

var text = getSelectedText('test');
243
Sean Bright

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

$("#selectId option:selected").html();
84
arturgrigor
document.getElementById('test').options[document.getElementById('test').selectedIndex].text;
52
wormhit
selectElement.options[selectElement.selectedIndex].text;

Verweise:

26
user669677

Unter HTML5 können Sie Folgendes tun:

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

Die Dokumentation von MDN unter https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions zeigt die vollständige Browser-Unterstützung (mindestens Dezember 2017) an, einschließlich Chrome, Firefox. Edge- und mobile Browser, jedoch ohne Internet Explorer.

20
davidjb

Die options-Eigenschaft enthält alle <options> - von dort aus können Sie .text betrachten.

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

Sie können selectedIndex verwenden, um die aktuell ausgewählte option abzurufen:

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

this.options [this.selectedIndex] .innerText

3
Phani CR

Wenn Sie diesen Thread gefunden haben und wissen wollten, wie Sie den ausgewählten Optionstext über ein Ereignis erhalten, finden Sie hier Beispielcode:

alert(event.target.options[event.target.selectedIndex].text);
2
zeros-and-ones

Verwenden Sie das Auswahllistenobjekt, um seinen eigenen ausgewählten Optionsindex zu ermitteln. Dort greifen Sie den inneren HTML-Code dieses Index auf. Nun 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>
1
Creeperstanson

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

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

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

Einfacher und einfacher Weg:

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