Avoir des drop downs sur notre page web améliore la qualité globale et le design sur l’écran.
Un drop-down fonctionne donc comme une alternative et dans des cas spécifiques, une meilleure option, par rapport aux boutons radio et aux cases à cocher. Attendez, quoi ? Avons-nous dit une alternative à la fois aux boutons radio et aux cases à cocher ? Mais, cela aurait dû être juste le bouton radio, n’est-ce pas ?
Un bouton radio ne permet pas plus d’une sélection et une case à cocher, d’autre part, permet une ou plusieurs sélections. Un utilisateur ne peut sélectionner qu’une seule option dans une liste déroulante et donc elle ressemble juste au bouton radio dans sa fonctionnalité et non aux cases à cocher, n’est-ce pas ? Eh bien, c’est là que le concept de sélections multiples dans une boîte de sélection entre en jeu.
Comment puis-je permettre aux utilisateurs de sélectionner plusieurs options dans une boîte de sélection?
Du point de vue d’un concepteur Web, permettre à l’utilisateur de choisir plusieurs options dans une boîte de sélection est assez simple et direct. Nous devons simplement ajouter l’attribut « multiple » à l’élément <select>. Maintenant, afin de sélectionner plusieurs options, vous devez ajouter un attribut de taille également à l’élément select. Ainsi, la boîte de sélection ressemblera à une boîte plutôt qu’à une simple liste déroulante.
L’utilisateur doit maintenir la touche Ctrl (sous Windows) et la touche Command (sur Mac) pour sélectionner les choix.
<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>Notez ces points
-
L’attribut « multiple » est un attribut booléen qui, lorsqu’il est présent, signifie que plusieurs options peuvent être choisies.
-
Du point de vue d’un concepteur web, le code HTML pour les sélections uniques et les sélections multiples d’une liste déroulante diffère un peu, cependant ; du point de vue de l’utilisateur final, cette différence n’est pas visible sur la page web. La boîte de sélection ne changerait pas sa mise en page ou son style dans les deux cas. Par conséquent, il faut indiquer à l’utilisateur comment sélectionner plusieurs options dans la boîte.
-
Compte tenu du point mentionné ci-dessus, il est préférable de choisir des cases à cocher plutôt que des sélections multiples si le nombre de choix est moindre.
-
La façon de sélectionner plusieurs options dans une liste déroulante diffère d’un système d’exploitation à l’autre. Alors que le bouton de contrôle (Ctrl) est utilisé pour les sélections dans Windows, le bouton de commande fait l’affaire dans les systèmes Mac.
Amélioration de la liste déroulante
Comme vous pouvez le constater, la boîte de sélection native de HTML est assez limitée surtout pour choisir plusieurs options. C’est là que JavaScript et les bibliothèques très efficaces entrent en jeu. Le composant jQuery select2 donne au concepteur le pouvoir de personnaliser la mise en page globale de la boîte de sélection en même temps que l’incorporation d’options très utiles comme la recherche, le chargement dynamique, le balisage, entre autres.
Select2 prend-il en charge les sélections multiples ?
Select2 prend en charge les sélections multiples dans les listes déroulantes. Pour activer les sélections multiples, il suffit d’inclure ‘multiple’ comme attribut.
L’avantage ici est que l’utilisateur n’a pas à appuyer sur la touche Ctrl ou Command pour sélectionner plusieurs options.
<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 ajoute également d’autres améliorations. Par exemple, afin de limiter le nombre de choix que l’utilisateur peut faire, il suffit d’ajouter maximumSelectionLength dans les options de Select2 comme ceci:
$(".js-example-basic-multiple-limit").select2({ maximumSelectionLength: 2});Lire plus sur Select2 dans la documentation
.