Vi vil forstå hvordan vi skal administrere < plukke ut > alternativ i JavaScript i denne opplæringen.
HTML Velg alternativ
Et alternativ forenkle oss alternativlisten. Det tillater oss å velge ett eller flere alternativer. Vi bruker elementene og for å danne et alternativ.
For eksempel:
Red Yellow Green Blue
Alternativet tillater oss å velge ett alternativ om gangen som er nevnt ovenfor.
Hvis vi ønsker mer enn ett valg, kan vi inkludere attributt til < flere > elementer under:
sammenligne i streng
Red Yellow Green Blue
HTMLSelectElement type
Vi bruker HTMLSelectElement-typen for å samhandle med alternativet i JavaScript.
HTMLSelectElement-typen inneholder følgende nyttige attributter:
selectedIndex-egenskap
Vi bruker DOM API som querySelector() eller getElementById() .
Eksemplet viser hvordan du får den valgte opsjonsindeksen som er nevnt nedenfor:
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); }; Hvordan det fungerer:
- Først velger du komponentene og ved hjelp av querySelector()-metoden.
- Deretter kobler du klikkhendelseslytteren til denne knappen og viser den valgte indeksen ved hjelp av alert()-metoden hvis knappen trykkes.
verdi eiendom
Elementets verdi-egenskap er avhengig av komponenten og multiple attributtene til HTML-koden:
- Verdiegenskapen til en valgboks vil være en tom streng når ingen alternativer er valgt.
- Value-egenskapen til en valgboks vil være verdien til det valgte alternativet når et alternativ er valgt og inneholder verdiattributtet.
- Verdiegenskapen til en valgboks vil være teksten til det valgte alternativet når et alternativ er valgt og ikke inneholder noe verdiattributt.
- Verdi-egenskapen til en valgboks vil bli avledet fra det første valgte alternativet angående de to siste reglene når mer enn ett alternativ er valgt.
Tenk på eksemplet nedenfor:
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); }; I dette eksemplet ovenfor:
- Verdiattributtet til elementet er tomt når vi velger det første alternativet.
- Verdiattributtet til en utvalgsboks vil være Ember.js på grunn av at det valgte alternativet ikke inneholder noe verdiattributt når vi velger det siste alternativet.
- Verdiattributtet vil være '1' eller '2' når vi velger det tredje eller andre alternativet.
HTMLOptionElement-type
HTMLOptionElement-typen illustrerer elementet i JavaScript.
Denne typen inneholder følgende egenskaper:
Indeks- Alternativets indeks innenfor gruppen av alternativer.
Valgt- Den returnerer en sann verdi hvis alternativet er valgt. Vi setter den valgte egenskapen sann for å velge et alternativ.
Tekst- Den returnerer teksten til alternativet.
Verdi- Den returnerer verdiattributtet til HTML.
Komponenten inneholder et opsjonsattributt som gir oss tilgang til innsamlingsalternativene:
selectBox.options
For å få tilgang til verdien og teksten til det andre alternativet bruker vi for eksempel følgende:
const text = selectBox.options[1].text; const value = selectBox.options[1].value;
For å få et valgt alternativ for komponenten sammen med et individuelt valg, bruker vi koden nedenfor:
let selectOption = selectBox.options [selectBox.selectedIndex];
Etter det kan vi få tilgang til verdien og teksten til et valgt alternativ etter verdi og tekstegenskaper:
const selectedText = selectedOption.text; const selectedValue = selectedOption.value;
Når komponenten tillater mer enn ett valg, kan vi bruke et valgt attributt for å bestemme hvilket alternativ som er valgt:
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); }; I eksempelet sb.opsjon er det array-lignende objektet. Derfor inneholder den ikke filter()-metoden samme som Array-objektet.
For å låne disse typene metoder gjennom et array-objekt bruker vi en call()-metode, nedenfor gir utvalget av valgte alternativer:
[].filter.call(sb.options, option => option.selected)
Og for å få tekstattributtet til ethvert alternativ, kan vi lenke utfallet av en filter()-metode sammen med en map()-metode som nedenfor:
.map(option => option.text);
For å få valgt alternativ ved å bruke for loop
VI kan bruke for-løkken for å iterere etter de valgte listealternativene for å bestemme hvilken som er valgt. En funksjon kan beskrives for å returnere referansen til et valgt alternativ eller verdien. Nedenfor gir referansen til et valgt alternativ:
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;>