We zullen begrijpen hoe we < selecteren > optie erin JavaScript in deze zelfstudie.
HTML Optie selecteren
Een optie vergemakkelijkt ons de optielijst. Het stelt ons in staat om één of meerdere opties te kiezen. We gebruiken de elementen en om een optie te vormen.
Bijvoorbeeld:
Red Yellow Green Blue
Met de optie kunnen we één optie tegelijk kiezen, zoals hierboven vermeld.
Als we meer dan één selectie wensen, kunnen we het attribuut aan < toevoegen meerdere > elementen hieronder:
Logica van de 1e orde
Red Yellow Green Blue
HTMLSelectElement-type
We gebruiken het HTMLSelectElement-type voor interactie met opties in JavaScript.
Het HTMLSelectElement-type bevat de volgende nuttige kenmerken:
geselecteerdeIndex-eigenschap
Wij passen de DOM API graag toe querySelector() of getElementById() .
Het voorbeeld geeft aan hoe u de geselecteerde optie-index kunt verkrijgen, die hieronder wordt vermeld:
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); }; Hoe het werkt:
- Selecteer in eerste instantie de componenten en met behulp van de methode querySelector().
- Koppel daarna de klikgebeurtenislistener aan deze knop en geef de geselecteerde index weer met behulp van de alert()-methode als de knop wordt ingedrukt.
eigendom waarderen
De waarde-eigenschap van het element is afhankelijk van de component en het meerdere attribuut van zijn HTML:
- De waarde-eigenschap van een selectievak is een lege tekenreeks als er geen optie is geselecteerd.
- De waarde-eigenschap van een select box is de waarde van de gekozen optie wanneer een optie is gekozen en bevat het waarde-attribuut.
- De waarde-eigenschap van een selectievak is de tekst van de gekozen optie wanneer een optie is gekozen en bevat geen waarde-attribuut.
- De waarde-eigenschap van een selectievak wordt afgeleid van de aanvankelijk geselecteerde optie met betrekking tot de afgelopen twee regels wanneer er meer dan één optie wordt gekozen.
Beschouw het onderstaande voorbeeld:
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); }; In dit bovenstaande voorbeeld:
- Het waardeattribuut van het element is leeg als we de initiële optie selecteren.
- Het waardekenmerk van een selectievak is Ember.js omdat de gekozen optie geen waardekenmerk bevat wanneer we de laatste optie kiezen.
- Het waardeattribuut is '1' of '2' als we de derde of tweede optie kiezen.
HTMLOptionElement-type
Het HTMLOptionElement-type illustreert het element in JavaScript.
Dit type bevat de volgende eigenschappen:
Inhoudsopgave- De index van de optie binnen de groep opties.
Geselecteerd- Het retourneert een echte waarde als de optie wordt gekozen. We stellen de geselecteerde eigenschap in op True om een optie te selecteren.
Tekst- Het retourneert de tekst van de optie.
Waarde- Het retourneert het waardeattribuut van HTML.
De component bevat een optie-attribuut waarmee we toegang hebben tot de verzamelingsopties:
selectBox.options
Voor toegang tot de waarde en tekst van de tweede optie gebruiken we bijvoorbeeld het onderstaande:
const text = selectBox.options[1].text; const value = selectBox.options[1].value;
Om een geselecteerde optie van het onderdeel samen met een individuele selectie te krijgen, gebruiken we de onderstaande code:
let selectOption = selectBox.options [selectBox.selectedIndex];
Daarna hebben we toegang tot de waarde en tekst van een geselecteerde optie via waarde- en teksteigenschappen:
const selectedText = selectedOption.text; const selectedValue = selectedOption.value;
Wanneer de component meer dan één selectie toestaat, kunnen we een geselecteerd attribuut gebruiken om te bepalen welke optie is geselecteerd:
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); }; In het voorbeeld is de sb.optie is het array-achtige object. Daarom bevat het niet de filter()-methode die hetzelfde is als het Array-object.
Voor het lenen van dit soort methoden via een array-object gebruiken we een call()-methode. Hieronder vindt u de array met gekozen opties:
[].filter.call(sb.options, option => option.selected)
En om het tekstattribuut van een optie te verkrijgen, kunnen we de uitkomst van een filter()-methode koppelen aan een map()-methode, zoals hieronder:
.map(option => option.text);
Om de geselecteerde optie te verkrijgen, gebruikt u de for-lus
WE kunnen de for-lus gebruiken om de geselecteerde lijstopties te herhalen om te bepalen welke er is gekozen. Er zou een functie kunnen worden beschreven voor het retourneren van de verwijzing naar een geselecteerde optie of de waarde. Het onderstaande geeft de verwijzing naar een geselecteerde optie:
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;>