HTMLOptionElement : constructeur Option()

Baseline Large disponibilité

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.

Dans cet article

Syntaxe

js
new Option()
new Option(text)
new Option(text, value)
new Option(text, value, defaultSelected)
new Option(text, value, defaultSelected, selected)

Paramètres

text Facultatif

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).

value Facultatif

Une chaîne de caractères représentant la valeur de HTMLOptionElement, c'est-à-dire l'attribut HTML value de l'élément <option>. Si ce paramètre n'est pas défini, la valeur de text est utilisée comme valeur, par exemple pour la valeur de l'élément <select> associé lorsque le formulaire est envoyé au serveur.

defaultSelected Facultatif

Une valeur true ou false qui définit la valeur de l'attribut selected, 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 est false. Notez qu'une valeur true ne sélectionne pas l'option si elle n'est pas déjà sélectionnée.

selected Facultatif

Une valeur true ou false qui définit l'état sélectionné de l'option ; la valeur par défaut est false (non sélectionné). Si cet argument est absent, même si l'argument defaultSelected vaut true, l'option n'est pas sélectionnée.

Exemples

Ajouter de nouvelles options

js
/* 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

html

js
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 :

html
<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

Spécification

HTML
# dom-option-dev

Compatibilité des navigateurs

Activez JavaScript pour afficher ce tableau de compatibilité des navigateurs.

Aider à améliorer MDN

Cette page vous a-t-elle été utile ?

Oui Non

Apprendre à contribuer

Cette page a été modifiée le 9 janv. 2026 par les contributeur·ice·s du MDN.

Voir cette page sur GitHub • Signaler un problème avec ce contenu

API HTML DOM
HTMLOptionElement
Constructeur
1. Option()
Propriétés d'instance
Héritage
Pages liées à HTML DOM
Guides
1. Utiliser les microtâches en JavaScript avec queueMicrotask()
2. Aller plus loin : Les microtâches et l'environnement d'exécution JavaScript