HTMLSelectElement : méthode add() - Les API Web | MDN
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.
La méthode add() de l'interface HTMLSelectElement ajoute un élément option à la
collection d'éléments pour cet élément HTML select.
Syntaxe
js
add(item)
add(item, before)
Paramètres
item-
Un objet
HTMLOptionElementouHTMLOptGroupElement beforeFacultatif-
Un élément de la collection, ou un indice de type long, représentant l'endroit où l'objet doit être inséré. Si ce paramètre vaut
null(ou si l'indice n'existe pas), le nouvel élément est ajouté à la fin de la collection.
Valeur de retour
Aucune (undefined).
Exceptions
HierarchyRequestErrorDOMException-
Levée si l'objet passé à la méthode est un ancêtre de
HTMLSelectElement.
Exemples
Créer des éléments à partir de zéro
js
const sel = document.createElement("select");
const opt1 = document.createElement("option");
const opt2 = document.createElement("option");
opt1.value = "1";
opt1.text = "Option : Valeur 1";
opt2.value = "2";
opt2.text = "Option : Valeur 2";
sel.add(opt1, null);
sel.add(opt2, null);
/*
Produit conceptuellement le résultat suivant :
<select>
<option value="1">Option : Valeur 1</option>
<option value="2">Option : Valeur 2</option>
</select>
*/
Le paramètre before est optionnel. Donc ce qui suit est accepté.
js
sel.add(opt1);
sel.add(opt2);
Ajouter à une collection existante
js
const sel = document.getElementById("existingList");
const opt = document.createElement("option");
opt.value = "3";
opt.text = "Option : Valeur 3";
sel.add(opt, null);
/*
Prend l'objet select existant suivant :
<select id="existingList">
<option value="1">Option : Valeur 1</option>
<option value="2">Option : Valeur 2</option>
</select>
Et le modifie ainsi :
<select id="existingList">
<option value="1">Option : Valeur 1</option>
<option value="2">Option : Valeur 2</option>
<option value="3">Option : Valeur 3</option>
</select>
*/
Le paramètre before est optionnel. Donc ce qui suit est accepté.
Insérer dans une collection existante
js
const sel = document.getElementById("existingList");
const opt = document.createElement("option");
opt.value = "3";
opt.text = "Option: Value 3";
sel.add(opt, sel.options[1]);
/*
Prend l'objet select existant suivant :
<select id="existingList">
<option value="1">Option : Valeur 1</option>
<option value="2">Option : Valeur 2</option>
</select>
Et le modifie ainsi :
<select id="existingList">
<option value="1">Option : Valeur 1</option>
<option value="3">Option : Valeur 3</option>
<option value="2">Option : Valeur 2</option>
</select>
*/
Spécifications
| Specification |
|---|
| HTML # dom-select-add-dev |