Liste déroulante multiple dynamique

Comment générer des listes déroulantes au clic depuis une autre liste déroulante ?

Difficile de donner un titre cohérent à cet exercice !  Dans cet article je partage le code d’un champ select multiple qui en génère un autre. Le scénario est le suivant : j’ai un champ select multiple. L’utilisateur fait son choix : le résultat s’affiche, et pour chaque ligne de résultat, un nouveau champ select apparaît. Au clic sur le deuxième bouton, le résultat global s’affiche avec tous les choix de l’utilisateur.

Pour chacun des champs, la fonction empty() permet de réinitialiser le choix de l’utilisateur, évitant ainsi une sélection infinie !

Voici le code et le rendu.

See the Pen
Multiple Select and Add New Select field
by yuyazz (@yuyazz)
on CodePen.