Att ha drop-downs på vår webbsida förbättrar den övergripande kvaliteten och designen på skärmen.
En drop-down fungerar alltså som ett alternativ och i vissa fall som ett bättre alternativ än radioknappar och kryssrutor. Vänta, vad är det? Sa vi att det är ett alternativ till både radioknappar och kryssrutor? Men det borde väl bara ha varit radioknappen?
En radioknapp tillåter inte mer än ett val och en kryssruta, å andra sidan, tillåter ett eller flera val. En användare kan bara välja ett alternativ från en rullgardinslista och därför liknar den bara radioknappen i sin funktionalitet och inte kryssrutorna, eller hur? Det är här konceptet med flera val i en kryssruta kommer in i bilden.
Hur kan jag tillåta användare att välja flera alternativ från en kryssruta?
Från en webbdesigners perspektiv är det ganska enkelt och okomplicerat att tillåta användaren att välja flera alternativ från en kryssruta. Vi behöver bara lägga till attributet ”multiple” till elementet <select>. För att kunna välja flera alternativ måste man nu lägga till ett attribut för storlek också till select-elementet. Detta kommer att få select-rutan att se ut som en ruta i stället för bara ett rullgardinsystem.
Användaren måste hålla ner Ctrl-tangenten (i Windows) och Command-tangenten (på Mac) för att välja alternativen.
<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>Notera dessa punkter
-
Attributet ”multiple” är ett boolskt attribut som, när det är närvarande, betyder att flera alternativ kan väljas.
-
Från en webbdesigners perspektiv skiljer sig HTML-koden för enstaka val och flera val från en rullgardinsmeny lite, men från slutanvändarens perspektiv är denna skillnad inte synlig på webbsidan. Urvalsrutan skulle inte ändra sin layout eller styling i något av fallen. Därför måste användaren få veta hur man väljer flera alternativ från rutan.
-
Med tanke på det som nämns ovan är det ett bättre val att välja kryssrutor än flera val om antalet valmöjligheter är färre.
-
Sättet att välja flera alternativ från en rullgardinsruta skiljer sig åt från ett operativsystem till ett annat. Kontrollknappen (Ctrl) används för valen i Windows, medan kommandoknappen gör susen i Mac-system.
Förbättra rullgardinsmenyn
Som du kan se är den ursprungliga HTML-valrutan ganska begränsad, särskilt när det gäller att välja flera alternativ. Det är här som JavaScript och de mycket effektiva biblioteken kommer in i bilden. Select2 jQuery-komponenten ger designern möjlighet att anpassa den övergripande layouten för selectboxen tillsammans med att införliva högteknologiska alternativ som sökning, dynamisk laddning, taggning, bland annat.
Har select2 stöd för flera val?
Select2 har stöd för flera val i rullgardinslistor. För att aktivera flera val är det bara att inkludera ”multiple” som attribut.
Fördelen här är att användaren inte behöver trycka på Ctrl- eller Command-tangenten för att välja flera alternativ.
<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 innehåller även andra förbättringar. Om du till exempel vill begränsa antalet val som användaren kan göra är det bara att lägga till maximumSelectionLength i Select2-alternativen så här:
$(".js-example-basic-multiple-limit").select2({ maximumSelectionLength: 2});Läs mer om Select2 i dokumentationen
.