Het hebben van drop downs op onze webpagina verbetert de algehele kwaliteit en het ontwerp op het scherm.
Een drop-down werkt dus als een alternatief en in specifieke gevallen, een betere optie, in vergelijking met radio buttons en checkboxes. Wacht, wat? Zeiden we een alternatief voor zowel radiobuttons als checkboxes? Maar, het had alleen het keuzerondje moeten zijn, nietwaar?
Een keuzerondje laat niet meer dan één selectie toe en een selectievakje daarentegen laat één of meer selecties toe. Een gebruiker kan slechts één optie uit een keuzelijst selecteren en daarom lijkt het in zijn functionaliteit alleen op het keuzerondje en niet op de selectievakjes, nietwaar? Welnu, dit is waar het concept van meerdere selecties in een select box in het spel komt.
Hoe kan ik gebruikers toestaan om meerdere opties uit een select box te selecteren?
Vanuit het oogpunt van een webontwerper, is het toestaan van de gebruiker om meerdere opties uit een select box te kiezen vrij eenvoudig en ongecompliceerd. We hoeven alleen maar het attribuut “multiple” toe te voegen aan het <select>-element. Nu, om meerdere opties te kunnen selecteren, moet je ook een size attribuut toevoegen aan het select element. De gebruiker moet de Ctrl-toets (in Windows) en de Command-toets (op de Mac) ingedrukt houden om de keuzemogelijkheden te selecteren.
<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>Let op deze punten
-
Het “multiple”-attribuut is een Booleaans attribuut dat, indien aanwezig, aangeeft dat meerdere opties kunnen worden gekozen.
-
Vanuit het oogpunt van een webdesigner verschilt de HTML-code voor enkelvoudige selecties en meervoudige selecties uit een vervolgkeuzelijst een beetje; vanuit het oogpunt van de eindgebruiker is dit verschil echter niet zichtbaar op de webpagina. De opmaak of vormgeving van het keuzevak zou in beide gevallen niet veranderen. Daarom moet de gebruiker worden verteld hoe hij meerdere opties uit het vak kan selecteren.
-
Gezien het bovenstaande punt is het een betere keuze om selectievakjes te kiezen dan meerdere selecties als het aantal keuzes minder is.
-
De manier om meerdere opties uit een vervolgkeuzelijst te selecteren verschilt van besturingssysteem tot besturingssysteem. In Windows wordt de Control-toets (Ctrl) gebruikt voor het maken van selecties, terwijl op Mac-systemen de Command-toets wordt gebruikt.
Versterken van de Dropdown
Zoals u ziet, is het eigen selectiekader van HTML vrij beperkt, met name voor het kiezen van meerdere opties. Dit is waar JavaScript en de zeer effectieve bibliotheken in de strijd komen. De select2 jQuery component geeft de ontwerper de macht om de algemene lay-out van de select box aan te passen, samen met het opnemen van hoge bruikbaarheid opties zoals zoeken, dynamisch laden, tagging, onder anderen.
Select2 ondersteunt meerdere selecties?
Select2 ondersteunt meerdere selecties in drop-down lijst. Om meerdere selecties mogelijk te maken, hoeft u alleen maar ‘multiple’ als attribuut op te nemen.
Het voordeel hiervan is dat de gebruiker niet op de Ctrl- of Command-toets hoeft te drukken om meerdere opties te selecteren.
<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 voegt ook nog andere verbeteringen toe. Om bijvoorbeeld het aantal keuzes dat de gebruiker kan maken te beperken, hoeft u alleen maar maximumSelectionLength toe te voegen aan de Select2-opties, en wel als volgt:
$(".js-example-basic-multiple-limit").select2({ maximumSelectionLength: 2});Lees meer over Select2 in de documentatie