Tristan Jahier

Grumpy dev' (╯°□°)╯彡┻━┻until shit.changes {visit same_page; expect {shit}.to change}
← Retour

Chosen : gérer l'ordre de sélection d'un select multiple

Posted 25/09/2013  •  Written by Tristan Jahier  •  Category : Développement web
Chosen multiple select Chosen est une librairie Javascript qui permet d'améliorer le rendu visuel des listes de sélection HTML select par défaut, et de leur ajouter des fonctionnalités. Cependant, Chosen ne propose pas de notion d'ordre ou de séquence de sélection lorsque l'on manipule un élément select multiple. J'ai donc créé un script pour palier à ce manque.

En fait, lorsque l'on utilise un select multiple Chosen, les éléments s'enfilent dans l'ordre où l'on les sélectionne. Cependant, il n'y a aucun moyen de récupérer cette séquence de sélection. Chosen ne fournit pas de fonction pour ça et il n'y a aucun attribut, ni dans l'élément Select original, ni dans le Select Chosen, qui décrit l'ordre dans lequel les options ont été sélectionnées.

En fait, l'ordre de sélection est purement visuel.

Chosen multiple order

Mais il y a une raison à cela. Les développeurs de Chosen n'ont pas souhaité apporter cette notion d'ordre à leur plugin car cette notion est également absente de l'élément select multiple basique en HTML. Une discussion autour du sujet résume bien la situation dans une tentative de pull request sur leur dépôt Github : Sort for multiple selects. Je suis d'ailleurs plutôt d'accord avec eux.

Cependant, pouvoir récupérer et définir l'ordre de sélection me parait être une requête raisonnable, surtout vu le nombre de demandes et de questions à ce propos. Que ce ne soit pas géré par Chosen lui-même, soit. Qu'à cela ne tienne, je me suis retroussé les manches et j'ai écrit 2 fonctions. La première pour récupérer les valeurs sélectionnées dans l'ordre sous forme de tableau. La seconde pour ré-ordonner les éléments dans l'interface de Chosen selon un tableau passé en paramètres.

A la base j'avais écrit ces 2 fonctions à « la rache » (une méthodologie qui a fait ses preuves). Elles étaient complètement liées au framework jQuery, et ne faisait aucune vérification sur les valeurs passées en paramètres. Puisque la librairie Chosen dispose d'un plugin pour le framework PrototypeJS, il fallait que mon script soit également compatible avec, pour que tout le monde puisse en profiter. J'ai alors entièrement ré-écrit le code, en m'inspirant des pratiques de développement de la librairie Chosen elle-même, et en écrivant 90% des sources en Javascript pur, non-lié à une framework spécifique. Seules quelques parties sont spécifiques à jQuery ou Prototype, par exemple les plugins qui permettent une bonne intégration à ces librairies.

J'ai également utilisé le pré-processeur CoffeeScript, et le gestionnaire de tâches Grunt pour faciliter la compilation des scripts. J'ai publié le résultat final sous licence MIT sur Github : https://github.com/tristanjahier/chosen-order.

Le plugin s'utilise très facilement. Par exemple, avec jQuery, c'est aussi trivial que ça :

// Récupération
var selection = $("#my-list").getSelectionOrder();
// selection #=> ["plop", "coucou", "tvvmb"]

// Définition de l'ordre
var order = ["nioup", "plop", "fianle"];
$("#my-list").setSelectionOrder(order);

#my-list est ici l'élément select de base. Le script fait quelques vérifications basiques telles que si l'élément est bien un select multiple, ou si le paramètre d'ordre passé est bien un tableau. Vous trouverez une documentation beaucoup plus complète (en anglais) dans le README.md sur Github.

K0N4M1 C0D3