Sélection d'option avec jQuery

BaBeuloula
Proposition de tutoriels

Bonjour,

J'ai trouvé ceci sur un site Internet :

Et je me suis demandé comment ils ont fait. J'ai regardé le code source et les champs non choisis sont dans les ul li avec un certain ID et ceux choisis sont dans un autre ul li et eux aussi avec un autre ID.

Pourquoi ne pas faire un tuto dessus ? Je trouve cela intéressant et bien plus joli qu'un select multiple.

Merci d'avance.

4 réponses

s4p

Salut,
Voici une ressource qui t'intéressera probablement.

BaBeuloula
Auteur

Ça peut éventuellement me servir, mais il n'y a pas de tuto et je voudrais apprendre à le faire. Mais bon si le code est assez simple je devrais pouvoir le comprendre.

s4p

Le principe est de détecter ce qui est tapé dans un input cloné.
(on garde l'original pour la validation du formulaire)
Ensuite s'il y a une correspondance, il faut l'extraire de l'input pour le mettre dans un autre élément.
Il faut aussi gérer les contrôles clavier pour se déplacer dans la liste et dans les éléments sélectionnés.
Enfin il faut remettre à jour le vrai input, soit en concaténant les éléments sélectionnés, soit en recréant autant d'input que d'éléments, ce qui permet d'envoyer le tout directement en tableau.

BaBeuloula
Auteur

Mon truc en fait est plus un sélect avec des option ou quand on clic sur une option ça l'ajoute sous cette forme afin d'éviter le sélect multi proposé par HTML qui est tous moche par défaut.

Je vais tester mais si quelqu'un a une piste pendant que j'essaye je suis preneur quand même.