Vi vil forstå, hvordan man administrerer < Vælg > mulighed i JavaScript i denne tutorial.
HTML Vælg indstilling
En mulighed lette os listen over muligheder. Det giver os mulighed for at vælge en enkelt eller mere end én mulighed. Vi bruger elementerne og til at danne en mulighed.
For eksempel:
Red Yellow Green Blue
Valgmuligheden giver os mulighed for at vælge én mulighed ad gangen, som er nævnt ovenfor.
Hvis vi ønsker mere end én valg, kan vi inkludere attribut til < mange > elementer nedenfor:
dato til streng
Red Yellow Green Blue
HTMLSelectElement type
Vi bruger HTMLSelectElement-typen til at interagere med option i JavaScript.
HTMLSelectElement-typen indeholder følgende nyttige attributter:
selectIndex-egenskab
Vi anvender DOM API ligesom querySelector() eller getElementById() .
Eksemplet viser, hvordan man opnår det valgte option-indeks, som er nævnt 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 virker:
- Indledningsvis skal du vælge komponenterne og ved hjælp af querySelector()-metoden.
- Tilknyt derefter klikhændelseslytteren til denne knap og vis det valgte indeks ved hjælp af alert()-metoden, hvis der trykkes på knappen.
værdi ejendom
Elementets værdiegenskab er afhængig af komponenten og multiple attributten i dets HTML :
- Værdiegenskaben for en valgboks vil være en tom streng, når der ikke er valgt nogen indstilling.
- Værdiegenskaben for en valgboks vil være værdien af den valgte indstilling, når en indstilling er blevet valgt og indeholder værdiattributten.
- Værdiegenskaben for en valgboks vil være teksten for den valgte indstilling, når en indstilling er blevet valgt og ikke indeholder nogen værdiattribut.
- Værdiegenskaben for en valgboks vil blive afledt fra den oprindeligt valgte indstilling vedrørende de sidste to regler, når mere end én indstilling er valgt.
Overvej nedenstående eksempel:
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 ovenstående eksempel:
- Elementets værdiattribut er tom, når vi vælger den indledende mulighed.
- Værdiattributten for en valgboks vil være Ember.js, da den valgte mulighed ikke indeholder nogen værdiattribut, når vi vælger den sidste mulighed.
- Værdiattributten vil være '1' eller '2', når vi vælger den tredje eller anden mulighed.
HTMLOptionElement type
HTMLOptionElement-typen illustrerer elementet i JavaScript.
Denne type indeholder følgende egenskaber:
Indeks- Optionens indeks inden for gruppen af muligheder.
Valgte- Det returnerer en sand værdi, hvis muligheden er valgt. Vi sætter den valgte egenskab sandt for at vælge en mulighed.
Tekst- Det returnerer teksten til indstillingen.
Værdi- Det returnerer værdi-attributten for HTML.
Komponenten indeholder en option-attribut, der giver os adgang til indsamlingsmulighederne:
selectBox.options
For at få adgang til værdien og teksten for den anden mulighed bruger vi for eksempel nedenstående:
const text = selectBox.options[1].text; const value = selectBox.options[1].value;
For at få en valgt mulighed for komponenten sammen med et individuelt valg, bruger vi nedenstående kode:
let selectOption = selectBox.options [selectBox.selectedIndex];
Derefter kan vi få adgang til værdien og teksten for en valgt indstilling efter værdi og tekstegenskaber:
const selectedText = selectedOption.text; const selectedValue = selectedOption.value;
Når komponenten tillader mere end én valg, kan vi bruge en valgt attribut til at bestemme, hvilken mulighed der 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 eksemplet er sb.option er det array-lignende objekt. Derfor indeholder den ikke filter()-metoden samme som Array-objektet.
For at låne disse typer metoder gennem et array-objekt bruger vi en call()-metode, nedenstående giver rækken af valgte muligheder:
[].filter.call(sb.options, option => option.selected)
Og for at få tekstattributten for enhver mulighed, kan vi kæde resultatet af en filter()-metode sammen med en map()-metode som nedenfor:
.map(option => option.text);
For at få valgt indstilling ved hjælp af for loop
VI kan bruge for-løkken til at iterere efter de valgte listeindstillinger til at bestemme, hvilken der er valgt. En funktion kunne beskrives til at returnere referencen til en valgt indstilling eller værdien. Nedenstående giver reference til en valgt mulighed:
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;>