Razumeli bomo, kako upravljati < izberite > možnost v JavaScript v tej vadnici.

HTML Izberite možnost

Možnost nam olajša seznam možnosti. Omogoča nam, da izberemo eno ali več možnosti. Za oblikovanje opcije uporabljamo elemente in.

Na primer:

 Red Yellow Green Blue 

Možnost nam omogoča, da izberemo eno možnost naenkrat, kar je omenjeno zgoraj.

Če želimo več kot en izbor, lahko vključimo atribut v < večkraten > elementi spodaj:

homogena mešanica

 Red Yellow Green Blue 

Vrsta HTMLSelectElement

Za interakcijo z možnostjo v JavaScriptu uporabljamo tip HTMLSelectElement.

Vrsta HTMLSelectElement vsebuje naslednje koristne atribute:

selectedIndex-Ta atribut daje indeks izbranih možnosti na osnovi nič. Izbrani indeks bo -1, če ni izbrana nobena možnost. Ko možnost dovoljuje več kot enkrat izbiro, izbrani indeks poda vrednost prve možnosti.vrednost-Atribut vrednosti daje atribut vrednosti prvotno izbrane komponente možnosti, če obstaja ena, sicer bo vrnil prazne nize.večkraten-Več atributov daje vrednost true, ko komponenta dovoljuje več kot en izbor. Enako je kot več atributov.

izbrana lastnostIndex

Uporabljamo DOM API kot querySelector() ali getElementById() .

Primer kaže, kako pridobiti izbrani indeks možnosti, ki je omenjen spodaj:

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

Kako deluje:

• Na začetku izberite komponente in s pomočjo metode querySelector().
• Nato povežite poslušalca dogodka klika s tem gumbom in prikažite izbrani indeks s pomočjo metode alert(), če je gumb pritisnjen.

vrednost nepremičnine

Lastnost vrednosti elementa se opira na komponento in več atributov njegovega HTML-ja:

• Lastnost vrednosti izbirnega polja bo prazen niz, če ni izbrana nobena možnost.
• Lastnost vrednosti izbirnega polja bo vrednost izbrane možnosti, ko je možnost izbrana in vsebuje atribut vrednosti.
• Lastnost vrednosti izbirnega polja bo besedilo izbrane možnosti, ko je bila možnost izbrana in ne vsebuje atributa vrednosti.
• Lastnost vrednosti izbirnega polja bo izpeljana iz prvotne izbrane možnosti glede zadnjih dveh pravil, ko je izbrana več kot ena možnost.

Razmislite o spodnjem primeru:

 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 tem zgornjem primeru:

• Vrednost atributa elementa je prazna, ko izberemo začetno možnost.
• Atribut vrednosti izbirnega polja bo Ember.js, ker izbrana možnost ne vsebuje atributa vrednosti, ko izberemo zadnjo možnost.
• Atribut vrednosti bo '1' ali '2', ko izberemo tretjo ali drugo možnost.

Vrsta HTMLOptionElement

Vrsta HTMLOptionElement ponazarja element v JavaScriptu.

Ta vrsta vsebuje naslednje lastnosti:

indeks- Indeks opcije v skupini možnosti.

Izbrano- Če je izbrana možnost, vrne pravo vrednost. Za izbiro možnosti nastavimo izbrano lastnost true.

besedilo- Vrne besedilo možnosti.

vrednost- Vrne atribut vrednosti HTML.

Komponenta vsebuje opcijski atribut, ki nam omogoča dostop do možnosti zbiranja:

 selectBox.options 

Na primer, za dostop do vrednosti in besedila druge možnosti uporabimo spodaj:

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

Za pridobitev izbrane možnosti komponente skupaj z individualno izbiro uporabimo spodnjo kodo:

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

Po tem lahko dostopamo do vrednosti in besedila izbrane možnosti z lastnostmi vrednosti in besedila:

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

Ko komponenta dovoljuje več kot eno izbiro, lahko uporabimo izbrani atribut za določitev, katera možnost je izbrana:

 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 primeru, sb.možnost je objekt podoben nizu. Zato ne vsebuje metode filter() kot objekt Array.

Za izposojo teh vrst metod prek matričnega objekta uporabljamo metodo call(), spodaj podaja niz izbranih možnosti:

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

Za pridobitev besedilnega atributa katere koli možnosti lahko povežemo rezultat metode filter() skupaj z metodo map(), kot je spodaj:

 .map(option => option.text); 

Če želite pridobiti izbrano možnost z uporabo zanke for

Uporabimo lahko zanko for za ponavljanje izbranih možnosti seznama, da ugotovimo, katera je izbrana. Lahko bi opisali funkcijo za vrnitev sklica na izbrano možnost ali vrednost. Spodaj je sklicevanje na izbrano 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;>