Pochopíme, ako spravovať < vyberte > možnosť v JavaScript v tomto návode.

HTML Select Option

Možnosť nám uľahčuje zoznam možností. Umožňuje nám vybrať si jednu alebo viac možností. Na vytvorenie opcie používame prvky a.

Napríklad:

 Red Yellow Green Blue 

Táto možnosť nám umožňuje vybrať jednu možnosť naraz, ktorá je uvedená vyššie.

Ak si želáme viac ako jeden výber, môžeme zahrnúť atribút do < viacnásobné > prvky nižšie:

dlho do int java

 Red Yellow Green Blue 

Typ HTMLSelectElement

Na interakciu s možnosťou v JavaScripte používame typ HTMLSelectElement.

Typ HTMLSelectElement obsahuje nasledujúce užitočné atribúty:

selectedIndex-Tento atribút poskytuje index vybratých možností založený na nule. Zvolený index bude -1, ak nie je vybratá žiadna možnosť. Ak voľba umožňuje viac ako jeden výber, selectedIndex udáva hodnotu prvej možnosti.hodnota-Atribút value udáva atribút value pôvodne vybratého komponentu voľby, ak existuje jeden, inak vráti prázdne reťazce.viac-Viaceré atribúty majú hodnotu true, keď komponent umožňuje viac ako jeden výber. Je to rovnaké ako pri viacerých atribútoch.

vlastnosť selectedIndex

Aplikujeme DOM API podobne querySelector() alebo getElementById() .

Príklad ukazuje, ako získať index vybranej možnosti, ktorý je uvedený nižšie:

 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); }; 

Ako to funguje:

• Najprv vyberte komponenty a pomocou metódy querySelector().
• Potom prepojte prijímač udalosti kliknutia na toto tlačidlo a po stlačení tlačidla zobrazte vybraný index pomocou metódy alert().

hodnotový majetok

Vlastnosť value prvku závisí od komponentu a atribútu multiple jeho HTML:

• Ak nebola vybratá žiadna možnosť, vlastnosť value výberového poľa bude prázdny reťazec.
• Vlastnosť value výberového poľa bude hodnotou vybranej možnosti, keď bola vybratá možnosť a obsahuje atribút value.
• Vlastnosťou value výberového poľa bude text vybranej možnosti, ak bola vybratá možnosť a neobsahuje žiadny atribút hodnoty.
• Hodnota vlastnosti výberového poľa bude odvodená od počiatočnej vybranej možnosti týkajúcej sa posledných dvoch pravidiel, ak je vybratých viac ako jedna možnosť.

Zvážte nasledujúci prí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 vyššie uvedenom príklade:

• Atribút value prvku je prázdny, keď vyberieme počiatočnú možnosť.
• Atribút hodnoty výberového poľa bude Ember.js, pretože zvolená možnosť neobsahuje žiadny atribút hodnoty, keď vyberieme poslednú možnosť.
• Ak zvolíme tretiu alebo druhú možnosť, atribút value bude '1' alebo '2'.

Typ HTMLOptionElement

Typ HTMLOptionElement ilustruje prvok v JavaScripte.

Tento typ obsahuje nasledujúce vlastnosti:

Index- Index opcie v rámci skupiny možností.

Vybraný- Ak je vybratá možnosť, vráti skutočnú hodnotu. Vybranú vlastnosť nastavíme na hodnotu true pre výber možnosti.

Text- Vráti text možnosti.

hodnota- Vracia hodnotu atribútu HTML.

Komponent obsahuje atribút voľby, ktorý nám umožňuje prístup k možnostiam kolekcie:

 selectBox.options 

Napríklad na prístup k hodnote a textu druhej možnosti používame nižšie:

 const text = selectBox.options[1].text; const value = selectBox.options[1].value; 

Na získanie vybranej možnosti komponentu spolu s individuálnym výberom používame nižšie uvedený kód:

 let selectOption = selectBox.options [selectBox.selectedIndex]; 

Potom môžeme získať prístup k hodnote a textu vybranej možnosti pomocou vlastností hodnoty a textu:

 const selectedText = selectedOption.text; const selectedValue = selectedOption.value; 

Keď komponent umožňuje viac ako jeden výber, môžeme použiť vybraný atribút na určenie, ktorá možnosť je vybratá:

 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 príklade je sb.možnosť je objekt podobný poľu. Preto neobsahuje metódu filter() rovnakú ako objekt Array.

Na vypožičanie týchto typov metód prostredníctvom objektu poľa používame metódu call(), nižšie uvádzame pole vybraných možností:

 [].filter.call(sb.options, option => option.selected) 

A na získanie atribútu textu ľubovoľnej možnosti môžeme spojiť výsledok metódy filter() spolu s metódou map(), ako je uvedené nižšie:

 .map(option => option.text); 

Ak chcete získať vybranú možnosť pomocou slučky for

Môžeme použiť cyklus for na iteráciu podľa vybratých možností zoznamu na určenie, ktorá je zvolená. Mohla by byť opísaná funkcia na vrátenie odkazu na vybranú možnosť alebo hodnotu. Nižšie je uvedený odkaz na vybranú možnosť:

 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;>