Méthode add -- Le Coin Web de QuentinC

Vous êtes ici : Accueil > Référence HTML et JavaScript > Objet Select > Méthode add

Méthode add

Description

Ajoute une entrée à la liste.

Syntaxe

void add(Option option, [Integer position])

Paramètres

Option option : La nouvelle option à ajouter à la liste.
Integer position : facultatif : Indique la position à laquelle ajouter le nouvel élément. S'il n'est pas spécifié, il s'ajoutera à la fin de la liste.

Exemple

En combinaison avec la méthode remove et la propriété selectedIndex, ce script permet d'ajouter et de supprimer des éléments dynamiquement dans la liste.

Etape 1 : Le formulaire

Nous allons commencer par créer le formulaire :

Voici le code HTML correspondant :

Afficher le code HTML

Si vous ne comprenez pas le contenu des onclick des boutons, ce n'est pas grave, n'essayez pas de comprendre.

Etape 2 : Le JavaScript

Voici maintenant le code JavaScript qui permet d'ajouter des entrées dans la liste :

// ON invite l'utilisateur à saisir un nom pour la nouvelle
entrée, avec la méthode prompt.
var str = prompt("Donnez un nom pour la nouvelle entrée de liste : ", "");

// ON vérifie si l'utilisateur
a bien saisi quelque chose
if (str) {

// ON crée un objet de type Option qui représentera la nouvelle option.
var option = new Option(str,
str);

// et on ajoute cette option à la liste.
document.forms["f"].elements["list"].add(option);
}

Voici maintenant le code JavaScript qui permet de supprimer l'option actuellement sélectionnée :

// ON crée un objet représentant la liste actuelle, pour
simplifier le code par la suite.
var e = document.forms["f"].elements["list"];

// ON récupère le numéro de position de l'entrée actuellement
sélectionnée
var i = e.selectedIndex;

// et on effectue la suppression
e.remove(i);