So erhalten Sie den ausgewählten Text des Javascript Select-Felds

79

Das funktioniert perfekt

<select name="selectbox" onchange="alert(this.value)">

Aber ich möchte den Text auswählen. Ich habe es auf diese Weise versucht

<select name="selectbox" onchange="alert(this.text)">

Es zeigt undefiniert. Ich habe herausgefunden, wie man DOM verwendet, um Text zu erhalten. Aber ich möchte dies auf diese Weise tun, ich meine, ich möchte nur diesen Wert verwenden.

javascript select

— Aajahid
quelle

126

this.options[this.selectedIndex].innerHTML

sollte Ihnen den "angezeigten" Text des ausgewählten Elements liefern. this.valueliefert, wie Sie sagten, lediglich den Wert des valueAttributs.

— Delan Azabani
quelle

6

Ich mag es nicht. Ich bin mir sicher, dass es in aktuellen Browsern funktioniert, aber es ist eine seltsame Mischung aus DOM-Element-basiertem Code und altmodischem Formularmanipulationscode. optionsGibt eine Liste von OptionObjekten zurück, von denen ich nicht sicher bin, ob sie irgendwo mit <option>Elementen identisch sind. Verwenden Sie besser die altehrwürdige textEigenschaft der ausgewählten Person Option, die garantiert funktioniert.

— Tim Down

Tim, OptionObjekte sind die gleichen wie HTMLOptionElementObjekte. Wenn Sie gegen die Verwendung sind options, können Sie alternativ childrenoder childNodesstattdessen verwenden (kann mich nicht genau erinnern, welche; ich denke, dass beide funktionieren)

— Delan Azabani

1

Ich denke, Sie verstehen das leicht falsch: Ich bin voll und ganz für die Verwendung options, aber OptionObjekte sind älter als HTMLOptionElementObjekte, und ich habe keine Spezifikation gesehen, die dies vorschreibt Optionund HTMLOptionElementdasselbe sein muss, auch wenn sie in den meisten Browsern, die beide unterstützen, möglicherweise vorhanden sind. Mein Punkt ist, dass es sicherer wäre, die beiden Stile nicht zu mischen. Ich würde also this.options[this.selectedIndex].texteine knotenbasierte Sache bevorzugen oder darauf basieren selectedIndex, was durch die Notwendigkeit, Whitespace-Textknoten im IE herauszufiltern, kompliziert wird.

— Tim Down

Das ist ein sehr guter Punkt. Gibt es aus Neugier, wenn Sie Nicht-Textknoten innerhalb der Optionsknoten haben, textdie innerHTMLoder nur alle Textknoten zusammen zurück?

— Delan Azabani

1

Meine Güte, hör auf, Inkompetenz zu stimmen! Oded hat die richtige Antwort. Wie schwer ist es, das Konzept des DOM zu erforschen? > __>

— John

68

Um den Wert des ausgewählten Elements zu erhalten, haben Sie folgende Möglichkeiten:

this.options[this.selectedIndex].text

Hier wird auf die verschiedenen optionsAuswahlen zugegriffen, und auf die SelectedIndexwird die ausgewählte ausgewählt, und dann textwird auf sie zugegriffen.

Lesen Sie mehr über die Auswahl DOM hier .

— Oded
quelle

1

this.options[this.selectedIndex].valueist genau das gleiche wie this.value, sorry.

— Delan Azabani

Wenn ich this.options [this.SelectedIndex] verwende. Textfehlerkonsole sagt - Fehler: this.options [this.SelectedIndex] ist undefiniert

— Aajahid

3

SHAKTI: Das liegt daran, dass es selectedIndexnicht so ist SelectedIndex.

— Tim Down

2

Oder nur zum Spaß this.selectedOptions[0].text(mit offensichtlichen Erweiterungen, wenn Sie eine Mehrfachauswahl haben).

— Ruffin

37

Bitte versuchen Sie diesen Code:

$("#YourSelect>option:selected").html()

— Andre Morata
quelle

So danke! Dies gibt den Wert des ausgewählten Elements in der Combobox zurück

— Säbel tabatabaee yazdi

.text () gibt tatsächlich den ausgewählten Text zurück

— Windrider

32

Benutz einfach

$('#SelectBoxId option:selected').text(); Zum Abrufen von Text wie aufgelistet

$('#SelectBoxId').val(); Zum Abrufen des ausgewählten Indexwerts

— Marvil Joy
quelle

2

Während dies für jQuery perfekt funktioniert, listete das OP nur Javascript als Original-Tag auf. Trotzdem +1, da so viele Leute jQuery verwenden.

— Sablefoste

1

Ich weiß, dass hier niemand nach einer jQuery-Lösung fragt, aber es könnte erwähnenswert sein, dass Sie mit jQuery einfach fragen können:$('#selectorid').val()

— Michiel
quelle

0

Wenn Sie den Wert erhalten möchten, können Sie diesen Code für ein Auswahlelement mit der ID = "selectBox" verwenden.

let myValue = document.querySelector("#selectBox").value;

Wenn Sie den Text erhalten möchten, können Sie diesen Code verwenden

var sel = document.getElementById("selectBox");
var text= sel.options[sel.selectedIndex].text;

— Michael Albers
quelle