JavaScript wybierz Element | Mark's Trackside

Podsumowanie: w tym samouczku dowiesz się, jak obsługiwać element <select> w JavaScript.

Wprowadzenie do HTML wybierz elementy

a<select> element zawiera listę opcji. Pozwala wybrać jedną lub wiele opcji.

aby utworzyć element<select>, należy użyć elementów<select> I<option>., Na przykład:

powyższy element<select> pozwala wybrać jedną opcję na raz.

Jeśli chcesz dokonać wielu selekcji, możesz dodać atrybut multiple do <select> element w następujący sposób:

do interakcji z <select> element w JavaScript, używasz typu HTMLSelectElement.,

TypHTMLSelectElement ma następujące użyteczne właściwości:

selectedIndex – zwraca indeks oparty na 0 wybranej opcji. selectedIndex to-1 jeśli nie wybrano żadnej opcji. Jeśli element<select> pozwala na wiele wyborów,selectedIndex zwracavalue pierwszej opcji.,
value – zwraca właściwośćvalue pierwszego zaznaczonego elementu opcji, jeśli taki istnieje, w przeciwnym razie zwraca pusty łańcuch.
multiple – zwracatrue jeśli element<select> pozwala na wiele selekcji. Jest odpowiednikiem atrybutu multiple.

aby wybrać element <select>, używasz interfejsu API DOM, takiego jak getElementById()lub querySelector().,

poniższy przykład ilustruje, jak uzyskać indeks wybranej opcji:

Jak to działa:

najpierw wybierz elementy <button> I <select> używając querySelector() metoda.
następnie dołącz do przycisku detektor zdarzeń click I Pokaż wybrany indeks za pomocą metody alert() po kliknięciu przycisku.,

value właściwość <select> element zależy od <option> element i jego HTML multiple atrybut:

jeśli nie wybrano żadnej opcji, właściwość value pola wyboru jest pustym łańcuchem znaków.
Jeśli opcja jest wybrana i ma atrybutvalue, właściwość value pola wyboru jest wartością wybranej opcji.,
Jeśli opcja jest wybrana i nie ma atrybutu value, właściwość value pola wyboru jest tekstem wybranej opcji.
Jeśli wybrano wiele opcji, właściwośćvalue pola wyboru pochodzi od pierwszej wybranej opcji na podstawie dwóch poprzednich reguł.

Patrz następujący przykład:

w tym przykładzie:

jeśli wybierzesz pierwszą opcję, właściwośćvalue<select> jest pusta.,
jeśli wybierzesz ostatnią opcję,value właściwość pola wyboru to Ember.jsponieważ wybrana opcja nie ma atrybutuvalue.
jeśli wybierzesz drugą lub trzecią opcję, właściwość value będzie miała wartość "1"lub "2".

w JavaScript,HTMLOptionElement Typ reprezentuje<option> element.,

TypHTMLOptionElement ma następujące przydatne właściwości:

index – indeks opcji wewnątrz kolekcji opcji.
selected – zwracatrue po wybraniu opcji. Aby wybrać opcję, należy ustawić tę właściwość na true.
text – zwraca tekst opcji.
value – zwraca atrybut wartości HTML.,08″>

następnie możesz uzyskać dostęp do text I value wybranej opcji za pomocą text I value właściwości:


Code language: JavaScript (javascript)

Jeśli element <select> umożliwia wielokrotne zaznaczanie, można użyć właściwości selected aby określić, które opcje są wybrane:

w tym przykładzie, sb.options jest obiektem podobnym do tablicy, więc nie posiada filter() metody podobne do Array obiekt.,

aby pożyczyć te metody z obiektuArray, należy użyć metody call(). Na przykład, poniższa tablica zwraca tablicę wybranych opcji:


Code language: PHP (php)

i aby uzyskać Właściwość text opcji, należy połączyć wynik metody filter() z map() metoda, taka jak ta:


Code language: JavaScript (javascript)

<select> element pozwala wybrać jedną lub wiele opcji., Dodaj atrybut multiple do elementu <select>, aby włączyć wiele selekcji.
HTMLSelectElement reprezentuje element<select>. Użyj selectedIndex I value, aby uzyskać indeks i wartość wybranej opcji.
HTMLOptionElement reprezentuje element<option>. Jeśli opcja jest zaznaczona, właściwość selected jest prawdziwa., WłaściwościselectedText IselectedValue zwracajątext Ivalue wybranej opcji.