Tutoriel - Personnaliser un select (ajouter une option en JavaScript)
L'ensemble des tutoriels est soumis à la licence CC BY-NC-SA 3.0 (Code Juridique).
Vous êtes donc libre de remixer et partager l'oeuvre aux conditions de l'attribuer (lien vers cette page), de ne pas l'utiliser à des fins commerciales, et de la partager avec une licence identique ou similaire.
Un visiteur peut-il ajouter sa propre valeur dans un select ? Exemple d'un select "Fréquence", avec les options : "Semaine", "Mensuel", et "Autre". Lorsqu'un visiteur choisis l'option "Autre", il peut ajouter son propre choix !
Nous allons voir dans ce tutoriel comment un visiteur peut ajouter une option dans un select.
Un petit exemple pour comprendre. Nous avons un select "Fréquence", avec, comme options : "Semaine", "Mensuel", et "Autre". Lorsqu'un utilisateur sélectionne l'option "Autre", une boîte de dialogue lui demande la nouvelle valeur a ajoutée ; celle-ci est alors ajoutée et sélectionnée toute seule. Pour cela, nous allons utiliser le JavaScript.
Aperçu final
Le HTML
Nous avons donc notre code html de base pour avoir notre select :
Nous allons lui ajouter un paramètre "onchange", qui permet de lancer une commande JavaScript à chaque changement d'option.
Appelons une fonction JavaScript que nous créerons plus tard ; nommons là "AjoutOptionAuSelect".
Afin que la fonction sache à quel select il faut ajouter une option, on précise en paramètre de fonction "this".
Ce qui nous donne :
Le JavaScript
Introduction
Tout d'abord, le code de base, avec la création de la fonction :
Intéressons nous maintenant au contenu de cette fonction.
Quelles sont les étapes ?
On vérifie que l'utilisateur a sélectionné l'option "Autre", sinon, on ne fait rien
On demande la nouvelle valeur à l'utilisateur
On vérifie que cette valeur est correcte
On ajoute la nouvelle option au select
On sélectionne ce select
Vérification si "Autre" est sélectionnée
Pour cela, nous allons utiliser le "this", et donc le paramètre "this_select" de la fonction.
"this_select.value" permettra de récupérer l'option sélectionné :
Demande et vérification de la nouvelle valeur
Ensuite, nous demandons au visiteur d'entrer la nouvelle option à ajouter, grâce à la fonction "prompt".
Cependant, il faut que cette valeur soit correcte, c'est à dire qu'elle ne contienne que des lettres (donc pas d'espace non plus), et qu'elle ne soit pas vide.
Pour faire la vérification des lettres, le mieux est de faire une simple regex :
Cette regex vérifie que la chaîne soit des lettres ("a-z"), et l'indicateur "i" à la fin, précise que l'on ne respecte pas la casse, c'est à dire qu'il peut aussi y avoir des lettres en majuscules.
Nous faisons donc une boucle "do" tant que que la valeur n'est pas correcte (que le regex soit bonne, et que la saisie ne soit pas vide) :
Une première amélioration de cette boucle serait que si l'utilisateur a cliqué sur "Annuler" dans la boîte de dialogue, la fonction s'arrête.
Pour cela, il faut vérifier que saisie ne vaut pas "null" :
Une deuxième amélioration serait de mettre un message d'erreur si la saisie est incorrecte :
Voilà, maintenant que nous avons notre valeur, nous allons l'ajouter à notre select.
Ajout de la nouvelle option au select
Nous devons mentionner à quel endroit dans la liste le nouvel élément doit être inséré.
Ici, le nouvel élément doit être ajouté à la fin de la liste.
Nous récupérons donc l'array des options du select (avec : "this_select.options"), puis nous lui ajoutons une ligne.
Il faut alors récupérer le nombre d'options actuelles au select (avec : ".length") :
Rappel : On commence de zéro, donc il ne faux pas ajouter 1 à ce nombre.
Nous utilisons ensuite la fonction JavaScript "new Option" qui aura pour but d'ajouter notre option.
Il nous suffit donc de faire :
Cette fonction donc sélectionne toute seule le nouvel élément, mais ça ne fonctionne pas sur tout les navigateurs.
Nous allons donc créer un petit code qui s'assurera que la nouvelle option soit bien sélectionnée.
Sélection de la nouvelle option
Nous allons faire une boucle sur toutes les options (on démarre de 0, et on va jusqu'au nombre d'éléments du select, dernier nombre non comprit puisque l'on commence à compter à partir de 0).
Lorsque que l'élément sera l'élément créé un peu plus haut, alors nous le sélectionnons grâce à ce code :
Ce qui nous donne :
Et voilà, notre select a correctement ajouté notre nouvel élément.
Récapitulatif du code
Le HTML
Le JavaScript
Questions / Remarques / Améliorations ?
N'hésitez pas à me contacter pour toutes questions / remarques / ou amélioration : http://dewep.net/Contact
