JavaScript select Element | Mark's Trackside

resum.: i denne vejledning lærer du, hvordan du håndterer <select> elementet i JavaScript.

Introduktion til HTML select elements

A<select> element giver dig en liste over muligheder. Det giver dig mulighed for at vælge en eller flere indstillinger.

for At danne en <select> – element, skal du bruge <select> og <option> – elementer., For eksempel:

ovenstående <select> element giver dig mulighed for at vælge en enkelt indstilling ad gangen.

Hvis du ønsker flere valg, kan du tilføje multiple – attributten til <select> element som følger:

for At interagere med <select> – element i JavaScript, du bruger HTMLSelectElement type.,

HTMLSelectElement type har følgende nyttige egenskaber:

selectedIndex – returnerer nul-baseret indeks for den valgte indstilling. selectedIndex er -1 hvis der ikke er valgt nogen indstilling. Hvis elementet <select> tillader flere valg, returnerer selectedIndex value for den første mulighed.,
value – returnerervalue egenskaben for det første valgte valgelement, hvis der er et, ellers returnerer det en tom streng.
multiple – returnerer true hvis elementet <select> tillader flere valg. Det svarer til multiple attributten.

for At vælge <select> – element, bruger du den DOM API som getElementById() eller querySelector().,

følgende eksempel illustrerer, hvordan at få indekset for den valgte indstilling:

Sådan fungerer det:

Første, vælg <button> og <select> elementer ved brug af querySelector() metode.
vedhæft derefter en klikhændelseslytter til knappen og vis det valgte indeks ved hjælp af alert() – metoden, når knappen klikkes.,

value ejet af <select> – element afhænger <option> – element og dets HTML multiple attribut:

Hvis ingen indstilling er valgt, value ejet af feltet vælg en tom streng.
hvis en indstilling er valgt og har envalue attribut, ervalue egenskaben i select-boksen værdien af den valgte indstilling.,
hvis en indstilling er valgt og ikke harvalue attributten ,ervalue egenskaben i select-boksen teksten til den valgte indstilling.
hvis der vælges flere indstillinger, er egenskabenvalue I select-boksen afledt af den første valgte indstilling baseret på de to foregående regler.

Se det følgende eksempel:

I dette eksempel:

Hvis du vælger den første mulighed, value ejet af <select> er tom.,
hvis du vælger den sidste mulighed, er value egenskaben i select – boksen Ember.js fordi den valgte indstilling ikke har value attributten.
Hvis du vælger den anden eller tredje mulighed, værdien af ejendommen vil være "1"eller "2".

i JavaScript repræsenterer HTMLOptionElement – typen <option> elementet.,

HTMLOptionElement type har følgende praktiske egenskaber:

index – indekset af indstilling inde indsamlingen af muligheder.
selected – returnerer true når indstillingen er valgt. Du indstiller denne egenskab til true for at vælge en mulighed.
text – returnerer optionens tekst.
value – returnerer attributten HTML-værdi.,08″>

Så du kan få adgang til de text og value af den valgte indstilling via text og value egenskaber:


Code language: JavaScript (javascript)

Hvis <select> element giver flere valg, kan du bruge selected ejendom at bestemme, hvilke indstillinger er valgt:

I dette eksempel, sb.options er et array, som objekt, så det ikke har filter() metoder som en Array objektet.,

for at låne disse metoder fra Array – objektet Bruger du call() – metoden. For eksempel, følgende returnerer et array af de valgte indstillinger:


Code language: PHP (php)

Og for at få den text ejet af de valg, du kæde resultatet af filter() metode med map() metode, som denne:


Code language: JavaScript (javascript)

<select> – element giver dig mulighed for at vælge en eller flere muligheder., Tilføjmultiple attributten til<select> elementet for at aktivere flere valg.
HTMLSelectElement repræsenterer <select> – element. Brug selectedIndex og value for at få indekset og værdien af den valgte indstilling.
HTMLOptionElement repræsenterer <option> – element. Hvis indstillingen er valgt, er ejendommen selected sandt., selectedText og selectedValue egenskaber returnere text og value af den valgte indstilling.