Javascript lista drop-down

Deci, în primul rând, ceea ce sarcină ne-am stabilit?

Consumurile elemente de opțiune

Setarea elementului selectat

Variabilele globale minime

Ușor de utilizat

Pentru primul punct, dacă nu deranjez cu JSON (la fel ca în cazul nostru strktura foarte dificil de obținut), este posibil ca date de intrare pentru lista drop-down, să ia o structură de matrice imbricate ca aceasta:

Începeți să scrieți funcția în sine. Mai ales nu filosofarea, i-am sunat BuildSelect lua, vom avea trei argumente:

Array pentru a crea elmentov opțiune (exemplul de mai sus) - lista drop-down.

HTMLElement - selectați elementul selectat, de exemplu, prin intermediul document.getElementById.

Grinzi valoarea selectată de - implicit.

Caracteristica principală a funcțiilor pentru a crea și a adăuga o nouă opțiune de meniu drop-down element. Ele sunt create cu ajutorul constructorului: noua opțiune (htmlText, valoare) - are 2 argumente, nu este greu de ghicit primul - acesta va fi numit ca o cutie drop-down, iar al doilea este cifră lui.

Adăugat opțiunea de noi elemente în elementul select folosind metoda add (opțiune, index) - acesta din urmă. add () Metoda are două argumente: primul - o singur element de opțiune creat folosind noul constructor Option, iar al doilea este indicele elementului în sine.

De fapt, totul este simplu, iar activitatea principală de a construi o listă dinamică, drop-down se reduce la prelucrarea de matrice:

Construirea unei liste dinamice drop-down

Ei bine, în codul HTML avem nevoie doar elementul select:

Ei bine, se pare că toate obiectivele stabilite de noi în procesul de construire a unei funcții pentru a crea o listă dinamică drop-down - am făcut-o! Întotdeauna să fie atât de