Hvis vi har drop-downs på vores webside, forbedrer vi den overordnede kvalitet og designet på skærmen.
En drop-down fungerer således som et alternativ og i visse tilfælde som en bedre mulighed i forhold til radioknapper og afkrydsningsfelter. Vent, hvad? Sagde vi, at det er et alternativ til både radioknapper og afkrydsningsfelter? Men, det skulle vel bare have været radioknappen, ikke sandt?
En radioknap tillader ikke mere end ét valg, og en afkrydsningsboks tillader derimod et eller flere valg. En bruger kan kun vælge én mulighed fra en drop-down-liste, og derfor ligner den kun radioknappen i sin funktionalitet og ikke afkrydsningsfelterne, ikke sandt? Nå, men det er her, at begrebet flere valgmuligheder i en selectbox kommer ind i billedet.
Hvordan kan jeg give brugerne mulighed for at vælge flere valgmuligheder i en selectbox?
Fra en webdesigners perspektiv er det forholdsvis enkelt og ligetil at give brugeren mulighed for at vælge flere valgmuligheder i en selectbox. Vi skal blot tilføje attributten “multiple” til <select>-elementet. For at kunne vælge flere muligheder skal man nu også tilføje en size-attribut til select-elementet. Dette vil få valgfeltet til at ligne en boks i stedet for blot en drop-down-menu.
Brugeren skal holde Ctrl-tasten (i Windows) og Command-tasten (på Mac) nede for at vælge valgmulighederne.
<select name="Country" multiple size="5"> <option value="USA">USA</option> <option value="Russia">Russia</option> <option value="India">India</option> <option value="Britain">Britain</option></select>Bemærk disse punkter
-
Attributten “multiple” er en boolsk attribut, som, når den er til stede, betyder, at der kan vælges flere valgmuligheder.
-
Fra en webdesigners perspektiv adskiller HTML-koden for enkeltvalg og flere valg fra en rulleliste sig dog en smule; fra slutbrugerens perspektiv er denne forskel ikke synlig på websiden. Valgfeltet ville ikke ændre sit layout eller sin styling i begge tilfælde. Derfor skal brugeren have at vide, hvordan man vælger flere valgmuligheder fra boksen.
-
Givet ovenstående punkt er det et bedre valg at vælge afkrydsningsfelter frem for flere valgmuligheder, hvis antallet af valgmuligheder er mindre.
-
Måden at vælge flere valgmuligheder fra en drop-down er forskellig fra styresystem til styresystem. Mens kontrolknappen (Ctrl) bruges til valg i Windows, er det kommandoknappen, der gør tricket i Mac-systemer.
Forbedring af dropdown
Som du kan se, er den oprindelige HTML-valgboks ret begrænset, især når det gælder valg af flere muligheder. Det er her, at JavaScript og de meget effektive biblioteker kommer ind i kampen. Select2 jQuery-komponenten select2 giver designeren mulighed for at tilpasse det overordnede layout af selectboksen sammen med indarbejdelse af muligheder med høj nytteværdi, såsom søgning, dynamisk indlæsning, tagging, blandt andet.
Understøtter select2 flere valg?
Select2 understøtter flere valg i drop-down-listen. For at aktivere flere valg skal du blot inkludere ‘multiple’ som en attribut.
Førdelen her er, at brugeren ikke behøver at trykke på Ctrl- eller Command-tasten for at vælge flere muligheder.
<script>$(function(){ $(".js-example-basic-multiple").select2();});</script><select class="js-example-basic-multiple" multiple="multiple"> <option value="US">United States</option> <option value="IND">India</option> <option value="GBR">Great Britain</option></select>Select2 tilføjer også andre forbedringer. Hvis du f.eks. vil begrænse antallet af valg, som brugeren kan foretage, skal du blot tilføje maximumSelectionLength i Select2-indstillingerne på denne måde:
$(".js-example-basic-multiple-limit").select2({ maximumSelectionLength: 2});Læs mere om Select2 i dokumentationen