HTMLOptionElement : constructeur Option()
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.
Le constructeur Option() permet de créer un nouvel objet HTMLOptionElement.
Syntaxe
new Option()
new Option(text)
new Option(text, value)
new Option(text, value, defaultSelected)
new Option(text, value, defaultSelected, selected)
Paramètres
textFacultatif-
Une chaîne de caractères représentant le contenu de l'élément, c'est-à-dire le texte affiché. Si ce paramètre n'est pas défini, la valeur par défaut sera
""(chaîne vide). valueFacultatif-
Une chaîne de caractères représentant la valeur de
HTMLOptionElement, c'est-à-dire l'attribut HTMLvaluede l'élément<option>. Si ce paramètre n'est pas défini, la valeur detextest utilisée comme valeur, par exemple pour la valeur de l'élément<select>associé lorsque le formulaire est envoyé au serveur. defaultSelectedFacultatif-
Une valeur
trueoufalsequi définit la valeur de l'attributselected, c'est-à-dire que cette<option>sera la valeur par défaut sélectionnée dans l'élément HTML<select>lors du premier chargement de la page. Si ce paramètre n'est pas défini, la valeur par défaut estfalse. Notez qu'une valeurtruene sélectionne pas l'option si elle n'est pas déjà sélectionnée. selectedFacultatif-
Une valeur
trueoufalsequi définit l'état sélectionné de l'option ; la valeur par défaut estfalse(non sélectionné). Si cet argument est absent, même si l'argumentdefaultSelectedvauttrue, l'option n'est pas sélectionnée.
Exemples
Ajouter de nouvelles options
/* Imaginons qu'on ait le code HTML suivant dans le document
<select id='s'>
</select>
*/
const s = document.getElementById("s");
const options = [Quatre, Cinq, Six];
options.forEach((element, key) => {
s[key] = new Option(element, key);
});
Ajouter des options avec différents paramètres
<select id="s"></select>
const s = document.getElementById("s");
const options = ["zéro", "un", "deux"];
options.forEach((element, key) => {
if (element == "zéro") {
s[s.options.length] = new Option(element, s.options.length, false, false);
}
if (element == "un") {
s[s.options.length] = new Option(element, s.options.length, true, false); // Ajouter l'attribut "selected"
}
if (element == "deux") {
s[s.options.length] = new Option(element, s.options.length, false, true); // Sélectionnera l'option dans la vue
}
});
Résultat :
<select id="s">
<option value="0">zéro</option>
<option value="1" selected>un</option>
<option value="2">deux</option>
<!-- L'utilisateur verra cette option sélectionnée -->
</select>
Spécifications
| Specification |
|---|
| HTML # dom-option-dev |