Javascript selectați - liste dinamice
Cum se pare din exterior
Puteți alege în prima listă a browser-ului, în timp ce a doua listă este umplut cu numele sistemului de operare pe care browser-ul se execută, dar în funcție de valoarea a doua listă este umplut cu a treia listă care conține versiunea disponibilă a browser-ului.
Să presupunem că avem un element pe pagină:
După cum se poate observa, SELECT este format din elemente OPTION. care sunt elemente ale listei. Elementele OPTION constau într-o etichetă de text inclus între opțiunea de etichete și valoarea unui atribut care conține valoarea etichetei text corespunzătoare. Eticheta text este vizibil pentru utilizator în listă, în timp ce o valoare de valoare nu este afișată pe ecran, și este transmis la server, atunci când formularul este depus (pentru server numai valorile selectate elementele din listă sunt transmise). Astfel, pentru a schimba elementul SELECT. avem nevoie pentru a lucra pe elemente OPTION.
Pentru a accesa elementul nostru lista se va utiliza metoda DOM getElementById documentul obiect:
În cazul în care lista este în interiorul formei, puteți face referire la ea, și prin forma de:
În cazul în care, numele myform specificat de atributul name în tag-ul FORM și numele mySelect elementului de formular specificat de atributul name în tag-ul SELECT.
Cum se adaugă un element nou în lista SELECT?
Adăugați elemente la sfârșitul listei atât de convenabil:
Proprietatea Lungimea a obiectului conține un număr de opțiuni de elemente din listă. Această caracteristică este disponibilă atât pentru citire și scriere. Dacă setați proprietatea lungime de o valoare mai mare decât numărul actual de elemente, elementele goale sunt adăugate în listă. În cazul în care valoarea setată este mai mic decât numărul actual de elemente ale listei, lista va fi trunchiat la numărul specificat de elemente (elementele suplimentare vor fi șterse). Astfel, pentru a adăuga un nou element în listă, și așa mai departe (să spunem că avem o listă goală, adăugați primul element):
Să ne întoarcem la opțiunea funcția de constructor (). În plus față de specificarea textului și a valorilor dacă elementul este selectat în mod prestabilit, puteți specifica (defaultSelected), adică dacă un element selectat formă de resetare prin reset () și dacă elementul selectat în mod curent în (selectată). Opțiunea completă de sintaxă funcția de obiect constructor are forma următoare:
În cazul în care, primele două argumente - un rând și al treilea și cherverty argumentele booleene și să ia valori adevărate sau false.
Până în prezent, pentru a adăuga elementul am folosit BOM. dar este mai bine în toate privințele, de a utiliza metode DOM. și adăugarea unui element pentru a realiza acest lucru:
Și, în sfârșit, unele caracteristici ale IE :-) În IE 5+ excluse (datorită funcționării instabile), posibilitatea de a adăuga un element din listă prin noua opțiune (). atunci când lista SELECT în sine este situată într-un singur document (rama ferestrei), ca elemente sunt adăugate dintr-un alt document (rama ferestrei), de exemplu, în cazul în care SELECT într-o fereastră părinte, și adăugați elemente ai nevoie de la o fereastră de copil deschide prin window.open (). Utilizarea DOM-metode pe care le puteți rezolva această problemă. Mai multe detalii despre această problemă în detaliu.
Accesul la elementele listei
Elementele unei liste în opțiunile de matrice este indexat de la zero, astfel încât primul element din listă are un indice de 0:
objSel.options [0] - un prim element al listei.
objSel.options [objSel.options.length-1] - ultimul element din listă
Modificarea unui element din listă
Cum știu care este elementul selectat și modul în care pentru a selecta elementul pe care doriți?
În obiect elementul SELECT există selectedIndex proprietate. care conține indexul elementului selectat, sau -1 dacă nu este selectat elemente.
Aici vreau să rețineți că puteți selecta mai multe valori din lista, pentru aceasta trebuie să specificați tag-ul proprietății multiple SELECT și specificați numărul de vizibile fără a derula printr-o listă de elemente atributului dimensiune (de exemplu, setați înălțimea listei măsurate în elementele vizibile), de exemplu, marcarea a crea o listă cu înălțimea unui element 3, care a permis pentru a selecta mai multe elemente simultan. Dacă specificați o dimensiune mai mare de 1, atunci lista nu mai este un drop-down, și modifică aspectul unei unități convenționale cu bara de defilare (în cazul în care dostupka neobhodimoti). Dimensiunea proprietate poate fi specificată și fără multiplă.
În cazul în care alegerea disponibilă a elementelor multiple, proprietatea cuprinde indexul primului element selectat din listă (adică elementul care se află mai sus în listă). Că, în acest caz, pentru a găsi toate elementele selectate pe care trebuie să bucla toate elementele de o serie de opțiuni și verificați proprietatea lor selectat. care este adevărat în elemente izolate:
Funcția getSelectedIndexes are ca argument o listă a obiectului și returnează o serie de indici elemente selectate.
Exemplu de aplicație (indicele de afișare al elementului selectat):
Proprietățile selectedIndex descrise și proprietățile sunt selectate pentru citire și scriere, astfel oferindu-le valorile dorite pot fi izolate elemente.
Pentru a selecta mai multe elemente (în cazul în care proprietatea este setată multiplu) pentru a instala selectat = proprietate valabil pentru toate elementele necesare:
Ar trebui să acorde o atenție la un bug în browser-ul Opera, care se manifestă în dinamică completarea listei printr-un script și instalarea ulterioară a unui element selectat prin proprietatea selectedIndex sau selectate. Bug-ul apare în anexa elementelor goale într-o listă la care accesul nu este posibil din script (script-ul nu le vedea, dar utilizatorul vede și le poate selecta). Aceste elemente pseudo-goale ale listei apar după proprietățile de instalare selectedIndex sau selectate. Pentru a rezolva această problemă în instalarea Opera, utilizați aceste proprietăți prin setTimeout, cu o întârziere de 1 ms:
Îndepărtarea elementului i-lea a listei
Sau folosind metoda DOM este eliminat:
Cum se curata o lista SELECT (modul de a elimina toate elementele din listă)?
Pentru a face acest lucru, puteți seta proprietatea lungime la zero:
Sau sunați DOM elimina metoda pentru fiecare element din lista:
Ca element glisant al listei în sus sau în jos
Liste dinamice legate Selectați - vizualizare interior
P.S. Nu uitați să descărcați și să salvați la bibliotecă linkedselect.js
-> Discutați despre articol pe forum
<- Назад к списку статей