Zrozumiemy, jak zarządzać < wybierać > opcja w JavaScript w tym samouczku.
HTML Wybierz opcję
Opcja ułatwia nam listę opcji. Pozwala nam wybrać jedną lub więcej opcji. Elementy i używamy do tworzenia opcji.
Na przykład:
Red Yellow Green Blue
Opcja pozwala nam wybrać jedną opcję na raz, o której mowa powyżej.
Jeśli chcemy więcej niż jednego wyboru, możemy dołączyć atrybut do < wiele > elementy poniżej:
drzewo binarne Java
Red Yellow Green Blue
Typ HTMLSelectElement
Do interakcji z opcjami w JavaScript używamy typu HTMLSelectElement.
Typ HTMLSelectElement zawiera następujące przydatne atrybuty:
wybrana właściwośćIndex
Stosujemy DOM API np zapytanieSelector() lub getElementById() .
Przykład pokazuje, jak uzyskać wybrany indeks opcji, o którym mowa poniżej:
JavaScript Select Option Demo Select a Color Red Yellow Green Blue Get a Selected Index const btn = document.querySelector('#btn'); const sb = document.querySelector('#color'); btn.onclick = (event) => { event.preventDefault(); alert(sb.selectedIndex); }; Jak to działa:
- Na początek wybierz i komponenty za pomocą metody querySelector().
- Następnie połącz detektor zdarzeń kliknięcia z tym przyciskiem i wyświetl wybrany indeks za pomocą metody alert() w przypadku naciśnięcia przycisku.
właściwość wartości
Właściwość wartości elementu opiera się na komponencie i wielokrotnym atrybucie jego kodu HTML:
- Jeśli nie wybrano żadnej opcji, właściwość wartości pola wyboru będzie pustym ciągiem znaków.
- Właściwość wartości pola wyboru będzie wartością wybranej opcji, gdy opcja została wybrana i zawiera atrybut wartości.
- Właściwość wartości pola wyboru będzie tekstem wybranej opcji, jeśli opcja została wybrana i nie zawiera żadnego atrybutu wartości.
- Właściwość wartości pola wyboru zostanie wyprowadzona z początkowo wybranej opcji w odniesieniu do dwóch ostatnich reguł, jeśli wybrano więcej niż jedną opcję.
Rozważ poniższy przykład:
JavaScript Selected Value Select a Color Red Yellow Green Blue Get a Selected Value const btn = document.querySelector('#btn'); const sb = document.querySelector('#color'); btn.onclick = (event) => { event.preventDefault(); alert(sb.value); }; W powyższym przykładzie:
- Atrybut wartości elementu jest pusty, gdy wybierzemy opcję początkową.
- Atrybutem wartości pola wyboru będzie Ember.js, ponieważ wybrana opcja nie zawiera atrybutu wartości, gdy wybierzemy ostatnią opcję.
- Atrybut wartości będzie miał wartość „1” lub „2”, gdy wybierzemy trzecią lub drugą opcję.
Typ elementu HTMLOption
Typ HTMLOptionElement ilustruje element w JavaScript.
Ten typ zawiera następujące właściwości:
Indeks- Indeks opcji w obrębie grupy opcji.
Wybrany- Zwraca wartość true, jeśli opcja została wybrana. Ustawiamy wybraną właściwość na true w celu wybrania opcji.
Tekst- Zwraca tekst opcji.
Wartość- Zwraca atrybut wartości HTML.
Komponent zawiera atrybut opcji, który umożliwia nam dostęp do opcji kolekcji:
selectBox.options
Na przykład, aby uzyskać dostęp do wartości i tekstu drugiej opcji, używamy poniższego:
const text = selectBox.options[1].text; const value = selectBox.options[1].value;
Aby uzyskać wybraną opcję komponentu wraz z indywidualnym wyborem, używamy poniższego kodu:
let selectOption = selectBox.options [selectBox.selectedIndex];
Następnie możemy uzyskać dostęp do wartości i tekstu wybranej opcji poprzez właściwości wartości i tekstu:
const selectedText = selectedOption.text; const selectedValue = selectedOption.value;
Gdy komponent pozwala na więcej niż jeden wybór, możemy użyć wybranego atrybutu do określenia, która opcja zostanie wybrana:
JavaScript Selected Box Select one or more Colors: Red Yellow Green Blue Get a Selected Colors const btn = document.querySelector('#btn'); const sb = document.querySelector('#color'); btn.onclick = (e) => { e.preventDefault(); const selectValues = [].filter.call(sb.options, option => option.selected).map (option => option.text); alert(selectedValues); }; W przykładzie sb.opcja jest obiektem tablicowym. Dlatego nie zawiera metody filter() takiej samej jak obiekt Array.
Do pożyczania tego typu metod poprzez obiekt tablicowy używamy metody call(), poniżej znajduje się tablica wybranych opcji:
[].filter.call(sb.options, option => option.selected)
Aby uzyskać atrybut tekstowy dowolnej opcji, możemy połączyć wynik metody filter() z metodą map(), jak poniżej:
.map(option => option.text);
Aby uzyskać wybraną opcję za pomocą pętli for
Możemy użyć pętli for do iteracji po wybranych opcjach listy w celu ustalenia, która z nich została wybrana. Można opisać funkcję zwracającą odwołanie do wybranej opcji lub wartości. Poniżej znajduje się odniesienie do wybranej opcji:
function getSelectedOption(sel) { var opt; for (var i= 0, len= sel.options.length; i<len; i++) { opt="sel.options[i];" if (opt.selected="==" true) break; } return opt; var console.log(opt.value); console.log(opt.text); < pre> <p>This function gives a single chosen option, which is compatible for the select-one type of select list. The same function compatible for select-multiple type pf select lists could give more than one selected option.</p> <h2>Summary</h2> <ul> <li>The component permits us for selecting one or more options. We can include the multiple property to the component for enabling more than one selections.</li> <li>The HTMLOptionElement illustrates the component. The selected attribute is true if an option is chosen. The selected value and selected text attributes return the value Add the text of the chosen option.</li> <li>The HTMLSelectElement illustrates the component. We can use the value and selected index for getting the value and index of the chosen option.</li> </ul> <hr></len;>