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

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