Shvatit ćemo kako upravljati < Izaberi > opcija u JavaScript u ovom vodiču.

HTML Odaberite opciju

Opcija nam olakšava popis opcija. Omogućuje nam odabir jedne ili više opcija. Elemente i koristimo za formiranje opcije.

Na primjer:

 Red Yellow Green Blue 

Opcija nam dopušta da odaberemo jednu po jednu opciju što je gore spomenuto.

Ako želimo više od jednog odabira, možemo uključiti atribut u < višestruki > elementi ispod:

int za char java

 Red Yellow Green Blue 

Vrsta HTMLSelectElementa

Koristimo vrstu HTMLSelectElement za interakciju s opcijom u JavaScriptu.

Tip HTMLSelectElement sadrži sljedeće korisne atribute:

selectedIndex-Ovaj atribut daje indeks odabranih opcija baziran na nuli. Odabrani indeks će biti -1 kada nije odabrana nijedna opcija. Kada opcija dopušta više od jednom odabira, selectedIndex daje vrijednost prve opcije.vrijednost-Atribut vrijednosti daje atribut vrijednosti inicijalno odabrane komponente opcije ako postoji jedan, inače će vratiti prazne nizove.više-Višestruki atributi daju istinito kada komponenta dopušta više od jednog odabira. To je isto kao višestruki atributi.

svojstvo selectedIndex

Primjenjujemo DOM API poput querySelector() ili getElementById() .

Primjer pokazuje kako dobiti indeks odabrane opcije koji je naveden u nastavku:

 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 radi:

• U početku odaberite komponente i uz pomoć metode querySelector().
• Nakon toga povežite slušatelja događaja klika s ovim gumbom i prikažite odabrani indeks uz pomoć metode alert() ako je gumb pritisnut.

vrijednost imovine

Svojstvo vrijednosti elementa oslanja se na komponentu i višestruki atribut njegovog HTML-a:

• Svojstvo vrijednosti okvira za odabir bit će prazan niz kada nijedna opcija nije odabrana.
• Svojstvo vrijednosti okvira za odabir bit će vrijednost odabrane opcije kada je opcija odabrana i sadrži atribut vrijednosti.
• Svojstvo vrijednosti okvira za odabir bit će tekst odabrane opcije kada je opcija odabrana i ne sadrži atribut vrijednosti.
• Svojstvo vrijednosti okvira za odabir bit će izvedeno iz početne odabrane opcije s obzirom na prethodna dva pravila kada je odabrano više od jedne opcije.

Razmotrite primjer u nastavku:

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

U ovom gornjem primjeru:

• Vrijednost atributa elementa je prazna kada odaberemo početnu opciju.
• Atribut vrijednosti okvira za odabir bit će Ember.js jer odabrana opcija ne sadrži atribut vrijednosti kada izaberemo posljednju opciju.
• Atribut vrijednosti bit će '1' ili '2' kada odaberemo treću ili drugu opciju.

Vrsta HTMLOptionElement

Tip HTMLOptionElement ilustrira element u JavaScriptu.

Ova vrsta sadrži sljedeća svojstva:

Indeks- Indeks opcije unutar grupe opcija.

Odabran- Vraća pravu vrijednost ako je opcija odabrana. Postavljamo odabrano svojstvo true za odabir opcije.

Tekst- Vraća tekst opcije.

Vrijednost- Vraća atribut vrijednosti HTML-a.

Komponenta sadrži atribut opcije koji nam dopušta pristup opcijama zbirke:

 selectBox.options 

Na primjer, za pristup vrijednosti i tekstu druge opcije koristimo sljedeće:

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

Za dobivanje odabrane opcije komponente zajedno s pojedinačnim odabirom koristimo donji kod:

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

Nakon toga možemo pristupiti vrijednosti i tekstu odabrane opcije pomoću svojstava vrijednosti i teksta:

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

Kada komponenta dopušta više od jednog odabira, možemo koristiti odabrani atribut za određivanje koja je opcija odabrana:

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

U primjeru, sb.opcija je objekt sličan nizu. Stoga ne sadrži metodu filter() kao objekt Array.

Za posuđivanje ovih vrsta metoda putem objekta niza, koristimo metodu call(), a dolje daje niz odabranih opcija:

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

A za dobivanje tekstualnog atributa bilo koje opcije, možemo ulančati ishod metode filter() zajedno s metodom map() kao što je dolje:

 .map(option => option.text); 

Za dobivanje odabrane opcije pomoću petlje for

MI možemo koristiti for petlju za ponavljanje po odabranim opcijama popisa za određivanje koje je odabrano. Mogla bi se opisati funkcija za vraćanje reference na odabranu opciju ili vrijednost. U nastavku se daje referenca na odabranu opciju:

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