Jak uzyskać zaznaczony tekst w polu wyboru Javascript

79

To działa doskonale 

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

Ale chcę zaznaczyć tekst. Próbowałem w ten sposób

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

Pokazuje niezdefiniowane. Odkryłem, jak używać DOM, aby uzyskać tekst. Ale chcę to zrobić w ten sposób, mam na myśli używanie właśnie this.value.

javascript select Aajahid
źródło

Odpowiedzi:

126 
this.options[this.selectedIndex].innerHTML

powinien dostarczyć "wyświetlany" tekst wybranej pozycji. this.valuejak powiedziałeś, po prostu podaje wartość valueatrybutu.

Delan Azabani
źródło
6
Nie podoba mi się to. Chociaż jestem pewien, że działa w obecnych przeglądarkach, jest to dziwna mieszanka kodu opartego na elementach DOM i kodu manipulującego w starym stylu. optionszwraca listę Optionobiektów, co do których nie jestem pewien, są nigdzie podane jako takie same jak <option>elementy. Lepiej jest wykorzystać uświęconą wiekiem textwłaściwość wybranego Option, która na pewno zadziała.
Tim Down
Tim, Optionprzedmioty są tym samym, co HTMLOptionElementprzedmioty. Jeśli sprzeciwiasz się używaniu options, możesz alternatywnie użyć childrenlub childNodeszamiast tego (nie pamiętam dokładnie, który z nich; myślę, że oba działają)
Delan Azabani
1
Myślę, że trochę źle zrozumiałeś: jestem całkowicie za używaniem options, ale Optionobiekty są starsze niż HTMLOptionElementobiekty i nie widziałem specyfikacji, która to nakazuje Optioni HTMLOptionElementmusi być tym samym, nawet jeśli mogą być w większości przeglądarek, które obsługują oba. Chodzi mi o to, że bezpieczniej byłoby nie mieszać tych dwóch stylów. Więc wolałbym this.options[this.selectedIndex].textcoś opartego na węzłach selectedIndex, co jest skomplikowane z powodu konieczności odfiltrowania węzłów tekstowych spacji w IE.
Tim Down
To bardzo dobra uwaga. Tak z ciekawości, jeśli masz węzły nietekstowe wewnątrz węzłów opcji, czy textzwraca wartość innerHTML, czy tylko wszystkie węzły tekstowe łącznie?
Delan Azabani,
1
Rany ludzie, powstrzymajcie niekompetencję w głosowaniu! Oded ma poprawną odpowiedź. Jak trudno jest zbadać koncepcję DOM? > __>
Jan
68

Aby uzyskać wartość wybranej pozycji, możesz wykonać następujące czynności:

this.options[this.selectedIndex].text

Tutaj optionsuzyskuje się dostęp do różnych z SelectedIndexzaznaczonych, a służy do wyboru wybranego, a następnie jegotext jest uzyskiwany dostęp do niego.

Przeczytaj więcej o wybranym modelu DOM tutaj .

Oded
źródło
1
this.options[this.selectedIndex].valuejest dokładnie taki sam, jak this.valueprzepraszam.
Delan Azabani,
Kiedy używam this.options [this.SelectedIndex] .text w konsoli błędu wyświetla komunikat - Błąd: this.options [this.SelectedIndex] jest niezdefiniowane
Aajahid
3
SHAKTI: To dlatego, że selectedIndexraczej niż SelectedIndex.
Tim Down
2
Lub dla zabawy this.selectedOptions[0].text(z oczywistymi rozszerzeniami, jeśli masz wybór wielokrotny).
ruffin
37

Spróbuj tego kodu:

$("#YourSelect>option:selected").html()
Andre Morata
źródło
Więc dziękuję! zwraca wartość wybranej pozycji w combobox
saber tabatabaee yazdi
.text () w rzeczywistości zwraca zaznaczony tekst
Windrider
33

Po prostu użyj

$('#SelectBoxId option:selected').text(); Aby uzyskać tekst wymieniony na liście

$('#SelectBoxId').val(); Aby wybrać wartość indeksu

Marvil Joy
źródło
2
Chociaż działa to doskonale w przypadku jQuery, OP jako oryginalny tag wymienił tylko javascript. Mimo to +1, ponieważ tak wiele osób używa jQuery.
Sablefoste
1

Wiem, że nikt nie pyta tutaj o rozwiązanie jQuery, ale warto wspomnieć, że z jQuery możesz po prostu poprosić o:$('#selectorid').val()

Michiel
źródło
0

Jeśli chcesz uzyskać wartość, możesz użyć tego kodu dla elementu select z id = "selectBox"

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

Jeśli chcesz uzyskać tekst, możesz użyć tego kodu

var sel = document.getElementById("selectBox");
var text= sel.options[sel.selectedIndex].text;
Michael Albers
źródło