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
var optionElementReference = new Option(text, value, defaultSelected, selected);
Parameters
textFacultatif-
Une chaîne de caractères
DOMStringreprésentant le contenu de l'élément, c'est-à-dire le texte affiché. Si cet argument n'est pas spécifié, c'est la chaîne vide qui sera utilisée. valueFacultatif-
Une chaîne de caractères
DOMStringreprésentant la valeur deHTMLOptionElement, c'est-à-dire l'attribut HTMLvaluede l'élément<option>. Si cet argument n'est pas fourni, ce sera la valeur detextqui sera reprise comme valeur (par exemple pour l'élément<select>associé lorsque le formulaire est envoyé au serveur). defaultSelectedFacultatif-
Un
Booleanqui définit la valeur de l'attributselected, c'est-à-dire que cette<option>sera la valeur par défaut sélectionné dans l'élément<select>lors du premier chargement de la page. S'il n'est pas spécifié, la valeurfalsesera utilisée par défaut. selectedFacultatif-
Un
Booleanqui définit l'état sélectionné de l'option, la valeur par défaut estfalse(non sélectionné). Si cet argument est absent et même si l'argumentdefaultSelectedvauttrue, l'option ne sera pas pas sélectionnée.
Exemples
Ajouter de nouvelles options
/* Imaginons qu'on ait le code HTML suivant dans le document
<select id='s'>
</select>
*/
var s = document.getElementById("s");
var options = [Quatre, Cinq, Six];
options.forEach(function (element, key) {
s[key] = new Option(element, key);
});
Ajouter des options avec différents paramètres
/* Imaginons qu'ont ait le code HTML suivant dans le document
<select id="s">
<option>Premier</option>
<option>Deuxième</option>
<option>Troisième</option>
</select>
*/
var s = document.getElementById("s");
var options = ["zéro", "un", "deux"];
options.forEach(function (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
}
});
/* Résultat dans le DOM / HTML modifié :
<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 |
Compatibilité des navigateurs
Chargement…