Pochopíme, jak spravovat < vybrat > možnost v JavaScript v tomto tutoriálu.
HTML Select Option
Možnost nám usnadňuje seznam možností. Umožňuje nám vybrat jednu nebo více možností. Pro vytvoření opce používáme prvky a .
Například:
Red Yellow Green Blue
Tato možnost nám umožňuje vybrat vždy jednu možnost, jak je uvedeno výše.
Pokud si přejeme více než jeden výběr, můžeme přidat atribut do < násobek > prvky níže:
long to int java
Red Yellow Green Blue
Typ HTMLSelectElement
Pro interakci s volbou v JavaScriptu používáme typ HTMLSelectElement.
Typ HTMLSelectElement obsahuje následující užitečné atributy:
vlastnost selectedIndex
Aplikujeme DOM API jako querySelector() nebo getElementById() .
Příklad ukazuje, jak získat index vybrané možnosti, který je uveden níže:
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 funguje:
- Nejprve vyberte komponenty a pomocí metody querySelector().
- Poté připojte posluchač události kliknutí k tomuto tlačítku a zobrazte vybraný index pomocí metody alert(), pokud je tlačítko stisknuto.
hodnotový majetek
Vlastnost value prvku závisí na komponentě a atributu multiple jeho HTML :
- Pokud nebyla vybrána žádná možnost, vlastnost value výběrového pole bude prázdný řetězec.
- Vlastností value výběrového pole bude hodnota vybrané možnosti, pokud byla volba vybrána a obsahuje atribut value.
- Vlastností value pole select bude text vybrané možnosti, pokud byla vybrána možnost a neobsahuje žádný atribut hodnoty.
- Vlastnost value výběrového pole bude odvozena z výchozí vybrané možnosti týkající se posledních dvou pravidel, pokud je vybráno více než jedna možnost.
Zvažte níže uvedený příklad:
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); }; V tomto výše uvedeném příkladu:
- Atribut value prvku je prázdný, když vybereme počáteční možnost.
- Atribut hodnoty pole výběru bude Ember.js, protože zvolená možnost neobsahuje žádný atribut hodnoty, když zvolíme poslední možnost.
- Atribut value bude '1' nebo '2', když zvolíme třetí nebo druhou možnost.
Typ HTMLOptionElement
Typ HTMLOptionElement ilustruje prvek v JavaScriptu.
Tento typ obsahuje následující vlastnosti:
Index- Index možnosti v rámci skupiny možností.
Vybraný- Pokud je tato možnost vybrána, vrátí hodnotu true. Vybranou vlastnost nastavíme jako true pro výběr možnosti.
Text- Vrátí text volby.
Hodnota- Vrací atribut value HTML.
Komponenta obsahuje atribut option, který nám umožňuje přístup k možnostem kolekce:
selectBox.options
Například pro přístup k hodnotě a textu druhé možnosti používáme níže:
const text = selectBox.options[1].text; const value = selectBox.options[1].value;
Pro získání vybrané možnosti komponenty spolu s individuálním výběrem používáme níže uvedený kód:
let selectOption = selectBox.options [selectBox.selectedIndex];
Poté můžeme přistupovat k hodnotě a textu vybrané možnosti pomocí vlastností hodnoty a textu:
const selectedText = selectedOption.text; const selectedValue = selectedOption.value;
Když komponenta umožňuje více než jeden výběr, můžeme použít vybraný atribut k určení, která možnost je vybrána:
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); }; V příkladu je sb.možnost je objekt podobný poli. Neobsahuje tedy metodu filter() stejnou jako objekt Array.
Pro vypůjčení těchto typů metod prostřednictvím objektu pole používáme metodu call(), níže uvádí pole vybraných možností:
[].filter.call(sb.options, option => option.selected)
A abychom získali atribut text libovolné možnosti, můžeme zřetězit výsledek metody filter() spolu s metodou map(), jak je uvedeno níže:
.map(option => option.text);
Chcete-li získat vybranou možnost pomocí smyčky for
Můžeme použít cyklus for pro iteraci podle vybraných možností seznamu pro určení, která je zvolena. Mohla by být popsána funkce pro vrácení odkazu na vybranou možnost nebo hodnotu. Níže je uveden odkaz na vybranou možnost:
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;>