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

Question 1

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.

Question 2

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.

Question 3

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 .

Question 4

Bitte versuchen Sie diesen Code:

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

Question 5

Benutz einfach

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

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

Question 6

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

Question 7

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;

Answer 1

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.

Answer 2

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

Answer 3

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

Answer 4

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

Answer 5

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

Answer 6

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

Answer 7

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

Answer 8

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

Answer 9

1

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

Delan Azabani

Answer 10

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

Aajahid

Answer 11

3

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

Tim Down

Answer 12

2

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

Ruffin

Answer 13

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

Answer 14

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

Säbel tabatabaee yazdi

Answer 15

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

Windrider

Answer 16

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

Answer 17

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

Answer 18

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

Answer 19

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;

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

Antworten: