JavaScript select Element | Mark's Trackside

rezumat: în acest tutorial, veți învăța cum să se ocupe de<select> element în JavaScript.

Introducere în HTML selectați elemente

a <select> element vă oferă o listă de opțiuni. Vă permite să selectați una sau mai multe opțiuni.

Pentru a forma un <select> element, utilizați <select> și <option> elemente., De exemplu:

elementul de mai sus <select> vă permite să selectați o singură opțiune la un moment dat.

Dacă doriți mai multe selecții, puteți adăuga multiple atributul <select> element, după cum urmează:

HTMLSelectElement tip

Pentru a interacționa cu <select> element în JavaScript, utilizați HTMLSelectElement tip.,

HTMLSelectElement tip are următoarele proprietăți utile:

selectedIndex – returnează zero-based indicele de opțiunea selectată. selectedIndexeste -1 dacă nu este selectată nicio opțiune. Dacă <select> element permite mai multe selecții, selectedIndex returnează value pentru prima variantă.,
value – întoarce value proprietatea a selectat primul element opțiune dacă există, în caz contrar returnează un șir gol.
multiple – întoarce true dacă <select> element permite mai multe selecții. Este echivalent cu atributul multiple.

De selectedIndex proprietate

Pentru a selecta un <select> element, utilizați DOM API ca getElementById() sau querySelector().,

următorul exemplu ilustrează modul în care pentru a obține indicele de opțiunea selectată:

Cum funcționează:

în Primul rând, selectați <button> și <select> elemente folosind querySelector() metoda.
apoi, atașați un click event listener la buton și afișați indexul selectat folosind metoda alert() când faceți clic pe buton.,

valoarea de proprietate

value proprietatea <select> element depinde de elementul <option> element și HTML multiple atribute:

Dacă opțiunea nu este selectată, value proprietatea selectați caseta este un șir gol.
dacă este selectată o opțiune și are un atribut value, proprietatea value din caseta select este valoarea opțiunii selectate.,
dacă este selectată o opțiune și nu are atributul value, proprietatea value din caseta select este textul opțiunii selectate.
dacă sunt selectate mai multe opțiuni, proprietatea value din caseta select este derivată din prima opțiune selectată pe baza celor două reguli anterioare.

a se Vedea exemplul următor:

În acest exemplu:

Dacă selectați prima opțiune, value proprietatea <select> este gol.,
Dacă selectați ultima opțiune, value proprietatea selectați caseta este Ember.js pentru că opțiunea selectată are nici un value atribut.
Dacă selectați a doua sau a treia opțiune, valoarea proprietății va fi "1"sau "2".

HTMLOptionElement tip

În JavaScript, HTMLOptionElement tip reprezintă <option> element.,

HTMLOptionElement tip are la îndemână următoarele proprietăți:

index – indicele de opțiune în interiorul colecție de opțiuni.
selected – returnează true când este selectată opțiunea. Setați această proprietate la true pentru a selecta o opțiune.
text – returnează textul opțiunii.
value – returnează atributul valorii HTML.,08″>

Apoi, puteți accesa text și value de opțiunea selectată prin text și value properties:


Code language: JavaScript (javascript)

Dacă un <select> element permite mai multe selecții, puteți folosi selected proprietate pentru a determina ce opțiuni sunt selectate:

În acest exemplu, sb.options este o matrice-ca obiect astfel încât acesta nu are filter() metode, cum ar fi un Array obiect.,pentru a împrumuta aceste metode de la obiectul Array, utilizați metoda call(). De exemplu, următorul exemplu returnează o matrice de opțiunile selectate:


Code language: PHP (php)

Și pentru a obține text proprietatea de opțiuni, lanț rezultatul filter() metoda cu map() metoda, astfel:


Code language: JavaScript (javascript)

Sumar

<select> element vă permite să selectați una sau mai multe opțiuni., Adăugați atributul multiple la elementul <select> pentru a activa mai multe selecții.
HTMLSelectElement reprezintă <select> element. Utilizați selectedIndexși value pentru a obține indexul și valoarea opțiunii selectate.
HTMLOptionElement reprezintă <option> element. Dacă opțiunea este selectată, proprietatea selected este adevărată., selectedText și selectedValue properties reveni text și value de opțiunea selectată.

a fost acest tutorial util ?
YesNo

JavaScript select Element (Română)