JavaScript velg Elementet | Mark's Trackside

Oppsummering: i denne opplæringen vil du lære hvordan å håndtere <select> – element i JavaScript.

Introduksjon til HTML velge elementer

En <select> – element gir deg en liste over alternativer. Det tillater deg å velge ett eller flere alternativer.

for Å danne en <select> – element, kan du bruke <select> og <option> – elementer., For eksempel:

over <select> – element, kan du velge et enkelt alternativ på en gang.

Hvis du vil velge flere, kan du legge til multiple attributtet til <select> – element som følger:

for Å samhandle med <select> – element i JavaScript, du bruker HTMLSelectElement type.,

HTMLSelectElement type har følgende nyttige egenskaper:

selectedIndex – returnerer null-basert indeks av det valgte alternativet. selectedIndex er -1 hvis det ikke er merket av for alternativet. Hvis <select> – element gjør det mulig for flere valg, selectedIndex tilbake value av det første alternativet.,
value – returnerer value holderen for det første alternativet som er valgt element hvis det er en, ellers returnerer en tom streng.
multiple – returnerer true hvis <select> – element gir flere valg. Det tilsvarer multiple attributtet.

for Å velge et <select> – element, kan du bruke DOM API som getElementById() eller querySelector().,

følgende eksempel illustrerer hvordan komme i indeksen for den valgte alternativet:

Hvordan det fungerer:

Første, velg <button> og <select> – elementer ved bruk av querySelector() metode.
Så, legg ved et klikk event lytter til-knappen og vise den valgte indeksen ved å bruke alert() metode når knappen klikkes.,

value egenskap av <select> – element avhenger <option> – element og dens HTML multiple attributt:

Hvis det ikke er merket av for alternativet, value eiendom i velg-boksen er en tom streng.
Hvis et alternativ er valgt, og har en value – attributt value eiendom velg boksen er verdien av det valgte alternativet.,
Hvis et alternativ er valgt, og har ingen value – attributt value eiendom velg boksen er teksten av det valgte alternativet.
Dersom flere alternativer er valgt, value holderen for velg-boksen er hentet fra den første valgte alternativet basert på de to foregående regler.

Se følgende eksempel:

I dette eksempelet:

Hvis du velger det første alternativet, value egenskap av <select> er tom.,
Hvis du velger det siste alternativet, value eiendom velg boksen er Ember.js fordi det valgte alternativet har ingen value attributtet.
Hvis du velger en andre eller tredje alternativ, og den verdi eiendommen vil bli "1"eller "2".

I JavaScript, HTMLOptionElement skriv representerer <option> – element.,

HTMLOptionElement type har følgende praktiske egenskaper:

index – indeksen alternativet inne innsamling av valg.
selected – returnerer true når dette alternativet er valgt. Du angir denne egenskapen til true for å velge et alternativ.
text – returnerer alternativ tekst.
value – returnerer HTML-attributt verdi.,08″>

Så du kan få tilgang til text og value av alternativet som er valgt via text og value egenskaper:


Code language: JavaScript (javascript)

Hvis en <select> – element gjør det mulig for flere valg, kan du bruke selected – egenskapen til å finne ut hvilke alternativer som er valgt:

I dette eksempelet, sb.options er en array-lignende objekt slik at det ikke har filter() metoder som en Array objekt.,

for Å låne disse metodene fra Array objekt, kan du bruke call() metode. For eksempel, følgende returnerer en matrise av valgt valg:


Code language: PHP (php)

Og for å få text egenskap av alternativene, kan du kjeden resultatet av filter() metode med map() metode, som dette:


Code language: JavaScript (javascript)

<select> – element, kan du velge ett eller flere alternativer., Legg til multiple – attributtet i <select> – element for å aktivere flere valg.
HTMLSelectElement representerer <select> – element. Bruk selectedIndex og value for å få indeksen, og verdien av det valgte alternativet.
HTMLOptionElement representerer <option> – element. Hvis alternativet er valgt, selected egenskap er ekte., selectedText og selectedValue egenskaper returnere text og value av det valgte alternativet.