Forma meniului drop-down este codată după cum urmează:
Elementul de opțiune conține valorile unei liste derulante.
Uneori este posibil să fie necesar ca acest meniu drop-down să joace rolul unui meniu de navigare. Asta este, dacă selectați o anumită opțiune, ne-am muta la pagina corespunzătoare. Desigur, acest tip de navigație nu ar trebui să fie de bază, dar, în unele cazuri, ca o modalitate suplimentară, această navigare poate fi destul de utilă.
Deci, vom continua să codificăm. Ca majoritatea sarcinilor în programare, această sarcină poate fi rezolvată în moduri diferite. Luați în considerare unul dintre ei. Mai întâi, setăm valoarea pentru fiecare opțiune din meniul derulant, această valoare fiind URI-ul paginii corespunzătoare la care ar trebui să apară tranziția dacă această opțiune este selectată.
Mai bine facem un buton când faceți clic pe care va avea loc tranziția. Cu alte cuvinte, tranziția nu va fi automată. Utilizatorul selectează elementul dorit din meniul derulant, apoi apasă butonul și apare o tranziție. Pentru a face acest lucru, vom folosi evenimentul onclick (când este apăsat) prin legarea acestuia la elementul de intrare.
formulare [0] - numărul de ordine al formularului. E prima. Numerotarea de la zero. Dacă nu este prima (când există mai multe formulare pe pagină), trebuie să o schimbați. Poate că este mai bine să folosiți accesul id prin document.getElementById [id value]
document.forms [0] .mymenu.options [document.forms [0] .mymenu.selectedIndex] .value - atât timp cât valoarea accesului primului câștig la o serie de opțiuni (colectare), și apoi la elementul selectat din lista verticală prin selectedIndex , apoi la proprietatea valorii
Nu te confunda cu citatele, te rog. document.forms [0] .mymenu.options [document.forms [0] .mymenu.selectedIndex] returnează .value are un rând, ea nu trebuie să fie plasate în ghilimele simple.
Iată ce avem:
Dacă lista este prea mare, puteți limita dimensiunea ferestrei la atributul selectare al etichetei selectați, caz în care lista depășește înălțimea ferestrei, va fi afișată bara de defilare. În Google Chrome, dimensiunile listate specificate sunt ignorate. Cod de listă cu bare de derulare și buton:
Lățimea și înălțimea ferestrei pot fi, de asemenea, setate în stil = "lățime: 200px; înălțime: 60px;" Eticheta selectată (în mod prestabilit, lățimea este aliniată cu cel mai lung cuvânt din listă), Google Chrome înțelege această setare pentru dimensiunea ferestrei:
Se deschide url într-o fereastră nouă
Pentru a deschide urlul selectat într-o fereastră nouă, utilizați metoda window.open:
Puteți controla funcționalitatea și dimensiunea ferestrei, de exemplu:
Iar butonul, dacă este necesar, este introdus în același mod ca cel descris mai sus.