JavaScript select Element | Mark's Trackside

samenvatting: in deze tutorial leert u hoe u met het <select> element in JavaScript omgaat.

Inleiding tot de HTML select elements

A <select> element biedt u een lijst met opties. Hiermee kunt u een of meerdere opties selecteren.

om een <select> element te vormen, gebruikt u de <select> en <option> elementen., Bijvoorbeeld:

met het bovenstaande <select> element kunt u één optie tegelijk selecteren.

Als u meerdere selecties wilt, kunt u multiple attribuut toevoegen aan <select> element als volgt:

het HTMLSelectElement type

voor interactie met <select> element in javascript gebruikt u het HTMLSelectElement type.,

het HTMLSelectElement type heeft de volgende nuttige eigenschappen:

selectedIndex – geeft de op nul gebaseerde index van de geselecteerde optie terug. De selectedIndex is -1 als er geen optie is geselecteerd. Als het<select> element meerdere selecties toestaat, geeftselectedIndex devalue van de eerste optie terug.,
value – geeft de eigenschap value van het eerste geselecteerde optieelement terug als er een is, anders geeft het een lege tekenreeks terug.
multiple – geeft true terug als het <select> element meerdere selecties toestaat. Het is equivalent aan het attribuut multiple.

de eigenschap selectedIndex

om een <select> element te selecteren, gebruikt u de DOM API zoals getElementById() of querySelector().,

het volgende voorbeeld illustreert hoe de index van de geselecteerde optie te krijgen:

hoe het werkt:

selecteer eerst de <button>en<select>elementen met behulp van dequerySelector()methode.
voeg dan een klik event listener toe aan de knop en Toon de geselecteerde index met behulp van de alert() methode wanneer op de knop wordt geklikt.,

de waarde eigenschap

de value eigenschap van het <select> element hangt af van het <option> element en zijn HTML multiple attribuut:

als er geen optie is geselecteerd, is de eigenschap value een lege tekenreeks.
als een optie is geselecteerd en een value attribuut heeft, is de eigenschap value de waarde van de geselecteerde optie.,
als een optie is geselecteerd en geen value attribuut heeft, is de eigenschap value de tekst van de geselecteerde optie.
als meerdere opties zijn geselecteerd, wordt de eigenschap value van het selectievak afgeleid van de eerste geselecteerde optie op basis van de vorige twee regels.

zie het volgende voorbeeld:

In dit voorbeeld:

Als u de eerste optie selecteert, is de valueeigenschap van de<select>leeg.,
Als u de laatste optie selecteert, is de eigenschap value van het selectievak Ember.js omdat de geselecteerde optie geen value attribuut heeft.
Als u de tweede of derde optie selecteert, zal de waarde-eigenschap "1"of "2"zijn.

het HTMLOptionElement type

In JavaScript vertegenwoordigt hetHTMLOptionElement type het<option> element.,

Het HTMLOptionElement type heeft de volgende handige eigenschappen:

index – de index van de optie binnen de verzameling van opties.
selected – geeft true terug wanneer de optie is geselecteerd. U stelt deze eigenschap in op true om een optie te selecteren.
text – geeft de tekst van de optie terug.
value – geeft het HTML-waarde-attribuut terug.,08″>

u kunt Vervolgens toegang krijgen tot het text en value van de geselecteerde optie via text en value eigenschappen:


Code language: JavaScript (javascript)

Als een <select> element zijn meerdere selecties mogelijk, u kunt gebruik maken van de selected eigenschap om te bepalen welke opties zijn geselecteerd:

In dit voorbeeld, de sb.options een array-object, zodat het niet hebben van de filter() methoden, zoals een Array object.,

om deze methoden te lenen van het Array object, gebruikt u de call() methode. Bijvoorbeeld:


Code language: PHP (php)

en om de text eigenschap van de opties te krijgen, keten je het resultaat van de filter() methode met de map() methode, als volgt:


Code language: JavaScript (javascript)

samenvatting

met het element <select> kunt u één of meerdere opties selecteren., Voeg het multipleattribuut toe aan het <select> element om meerdere selecties mogelijk te maken.
hetHTMLSelectElement vertegenwoordigt het<select> element. Gebruik de selectedIndex en value om de index en waarde van de geselecteerde optie te krijgen.
hetHTMLOptionElement vertegenwoordigt het<option> element. Als de optie is geselecteerd, is de eigenschap selected true., DeselectedText enselectedValue properties retourneren detext envalue van de geselecteerde optie.

Was deze tutorial nuttig ?
YesNo