Menu dropdown


Dropdowns eller menuer er lister der viser nogle data. Når man ser de lister kan man vælge en værdi fra de muligheder der bliver vist. Dette bruges primært til at vælge mellem en stor mængde hvor vi ikke kan forvente at brugerne kender mulighederne. Desuden gør det livet lettere ved at vi kan se de muligheder der er og derfor behøver vi ikke at huske dem. Der er en mulighed for at vælge flere fra listen men dette bliver ikke brugt så ofte.

<SELECT name=Listbox>
<OPTION value=Vælg selected>Vælg drik 
<OPTION value=Kaffe>Kaffe
<OPTION value=Te selected>Te
<OPTION value=Sodavand>Sodavand <OPTION value=Øl>Øl
<OPTION value=Vin>Vin
<OPTION value=Juice>Juice
</SELECT>

 
Dette er en boks hvor vi kun kan vælge en værdi. Prøv og se hvordan den virker. Husk at hvis du skal bruge den til at sende data til serveren skal du have form taget rundt om og samtidig skal du have en knap til at sende data.
 
SELECT viser at her er det en menu eller dropdown der er tale om.
OPTION value=Vælg selected>Vælg drik er en af de felter der vises og der er angivet en værdi Vælg der sendes til serveren. Vælg drik er det som vises til brugeren. Til sidst der der selected som angiver at det er det felt der vises når man kommer ind på siden og inden brugeren har foretaget et valg. 
 

Resultat

 

 
Som det kan ses har vi valgt Vælg drik som default dvs. den værdi som altid står i feltet før brugeren har valgt en værdi. Dette tjener to formål. Dels at vi er sikre på at brugeren har foretaget et valg ved at teste om værdien er forskellig fra vælg drik. Dels at vi kan være sikre på hvilken værdi brugeren ser før han vælger.
 

Kode

<SELECT name=Listbox multiple size=4>
<OPTION value=Vælg selected>Vælg drik 
<OPTION value=Kaffe>Kaffe
<OPTION value=Te selected>Te
<OPTION value=Sodavand>Sodavand <OPTION value=Øl>Øl
<OPTION value=Vin>Vin
<OPTION value=Juice>Juice
</SELECT>

 
Her kan du se at den eneste forskel i koden er at i Select feltet er skrivet multiple size=4 som betyder at vi kan foretage flere valg og at der bliver vist 4 felter ad gangen.
 

Resultat

 

Du kan selv prøve men du skal brug Ctrl knappen for at kunne vælge mere end et felt fra listen.