Besoins

Dans le cadre d’un projet personnel, j’ai eu besoin d’utiliser l’élément HTML « multiselect ». En effet, pour une selection de plusieurs éléments par un utilisateur, le DOM web nous offre comme choix soit le multi select, soit une liste de checkbox. Lorsque l’on a beaucoup de choix à proposer, les checkbox deviennent simplement anti-ergonomique et favorisent les erreurs utilisateurs : oubli, case « d’à coté » cochée, …

J’ai donc opté pour le multi select. Cet élément est peu courant dans les pages web, tant son utilisation est fastidieuse et peu intuitive : une liste déroulante, dans laquelle on peut selectionner une ou plusieurs options en utilisant les touches Ctrl (ou Pomme) et Shift.

J’ai donc développé un plugin jQuery permettant de rendre l’utilisation d’un multi select bien plus naturelle.

Voir la démo ou le site du projet

La solution

La solution paliative doit permettre :

  • un encombrement raisonnable de la liste de choix ;
  • une visibilité immédiate des choix selectionnés ;
  • être bien entendu non intrusif (compatible sans javascript) ;
  • être applicable aux éléments que souhaite le développeur.

J’ai baptisé ce pluggin jQuery jQuery NiceMultiSelect — nom un tantinet ridicule mais parlant dans une certaine mesure. Il permet de remplacer les multi select hiddeux par un champs simple, qui au clic présente la liste complète des choix, et leur selection / deselection en un simple clic.

Le plugin est non intrusif et peut donc être utilisé et retiré à loisir sans risque pour l’application dans laquelle il est appliqué. Vous pouvez en voir la démo sur cette page.

Ce plugin est sous licence MIT, donc vous êtes libres de l’utiliser, même pour usage commercial. Et si besoin d’améliorations, vous pouvez tout demander sur le repo hébergé par BitBucket, j’aurai plaisir à le compléter.

Bonus

J’ai fait un petit site rapidement pour partager ce plugin et le présenter.