Nous allons voir dans ce tutoriel comment un visiteur peut ajouter une option dans un select, choisir une valeur personnalisée.
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 à ajouter ; celle-ci est alors ajoutée et sélectionnée toute seule. Pour cela, nous allons utiliser du JavaScript.
Nous avons donc notre code html de base pour avoir notre select :
1 <select name="frequences"> 2 <option value="Semaine">Semaine</option> 3 <option value="Mensuel">Mensuel</option> 4 <option value="Autre">Autre</option> 5 </select>
Nous allons lui ajouter un paramètre onChange, qui permet de lancer une commande JavaScript à chaque changement d'option.
Appelons une fonction JS que nous créerons plus tard ; nommons là AjoutOptionAuSelect.
Afin que la fonction puisse savoir à quel select il faut ajouter une option, on précise en paramètre de fonction this, qui sélectionne donc notre balise.
1 <select name="frequences" onchange="AjoutOptionAuSelect(this);"> 2 <!-- ... -->
Tout d'abord, le code de base, avec la création de la fonction (rien de bien compliqué) :
html
<script type="text/JavaScript">
function AjoutOptionAuSelect(this_select)
{
// Contenu de la fonction
}
</script>
Intéressons-nous maintenant au contenu de cette fonction.
Quelles sont les étapes ?
Autre, sinon, on ne fait rienPour 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é.
1 if (this_select.value == "Autre") 2 { 3 // C'est ok. 4 }
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 :
1 .match(/[^a-z]/i)
Cette regex vérifie que la chaîne soit des lettres (a-z), et le drapeau 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 la valeur n'est pas correcte (que le regex soit bonne et que la saisie ne soit pas vide) :
1 var saisie; 2 do 3 { 4 saisie = prompt("Entrer la nouvelle valeur :"); 5 } 6 while (saisie.match(/[^a-z]/i) && saisie != "")
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 :
1 var saisie; 2 do 3 { 4 saisie = prompt("Entrer la nouvelle valeur :"); 5 if (saisie == null) return false; 6 } 7 while (saisie.match(/[^a-z]/i) && saisie != "")
Une deuxième amélioration serait de mettre un message d'erreur si la saisie est incorrecte :
1 var saisie; 2 var pass = false; 3 do 4 { 5 if (pass) alert("La valeur est incorrecte. Elle ne doit comporter que des lettres."); 6 7 saisie = prompt("Entrer la nouvelle valeur :"); 8 if (saisie == null) return false; 9 10 pass = true; 11 } 12 while (saisie.match(/[^a-z]/i) && saisie != "")
Voilà, maintenant que nous avons notre valeur, nous allons l'ajouter à notre 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) :
1 this_select.options[this_select.length] = ...;
Rappel : On commence de zéro, il ne faut donc 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 :
1 this_select.options[this_select.length] = new Option(saisie, saisie, true, true);
Pour plus d'informations sur les paramètres de la fonction Option, vous pouvez aller consulter ce site : http://fr.selfhtml.org/javascript/objets/options.htm#nouveaux_elements.
Cette fonction est censée sélectionner toute seule le nouvel élément, mais ce n'est pas compatible avec tous les navigateurs.
Nous allons donc créer un petit code qui s'assurera que la nouvelle option soit bien sélectionnée.
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 :
1 option_actuelle.selected = true;
Ce qui nous donne :
javascript
for (var i=0; i < this_select.options.length; i++)
{
if (this_select.options*.value == saisie)
{
this_select.options*.selected = true;
}
}
1 <select name="frequences" onChange="AjoutOptionAuSelect(this);"> 2 <option value="Semaine">Semaine</option> 3 <option value="Mensuel">Mensuel</option> 4 <option value="Autre">Autre</option> 5 </select>
1 function AjoutOptionAuSelect(this_select) 2 { 3 if (this_select.value == "Autre") 4 { 5 var saisie; 6 var pass = false; 7 do 8 { 9 if (pass) alert("La valeur est incorrecte. Elle ne doit comporter que des lettres."); 10 11 saisie = prompt("Entrer la nouvelle valeur :"); 12 13 if (saisie == null) return false; 14 pass = true; 15 } 16 while (saisie.match(/[^a-z]/i) && saisie != "") 17 18 this_select.options[this_select.length] = new Option(saisie, saisie, true, true); 19 20 for (var i=0; i < this_select.options.length; i++) 21 { 22 if (this_select.options*.value == saisie) 23 { 24 this_select.options*.selected = true; 25 } 26 } 27 } 28 }