Création d’un Élément d’option HTML à l’aide du constructeur JavaScript Option()

Le constructeur JavaScript Option() peu connu vous permet d’éviter la syntaxe verbeuse de la création d’éléments DOM

Nous aimons tous jQuery. Parmi les nombreuses qualités impressionnantes de cette bibliothèque, il y a la possibilité de créer facilement des éléments DOM et de les placer dans le document sans la syntaxe normalement verbeuse du JavaScript natif.

Mais il existe une fonctionnalité peu connue de JavaScript qui vous permet de créer des éléments d’option avec un effort assez minimal. Cette fonctionnalité est le constructeur Option(). La syntaxe est simple:

1. Obtenir une référence à un élément de formulaire
2. Instancier le constructeur et associe l’objet retourné à l’élément de formulaire
3. Pendant l’instanciation, transmettez les arguments suivants: 1) le texte affiché sur la page, 2) la valeur du contrôle, 3) s’il s’agit de la sélection par défaut et s’il est sélectionné

Exemple #1

Dans l’exemple #1, nous avons un formulaire simple qui inclut un contrôle select. Dans le balisage, il y a trois options: « Lundi », « mardi » et « mercredi ». Lorsque le JavaScript s’exécute, les actions suivantes ont lieu:

1. Nous obtenons une référence aux contrôles de sélection (« w »)
2. Nous supprimons tous les éléments d’option (w.length = 0)
3. Nous créons un tableau d’objets, chacun avec deux propriétés (« d »)
4. Nous parcourons le tableau et pour chaque élément de tableau, créons dynamiquement un nouvel élément select, en utilisant les propriétés « text » et « val » de l’objet. Dans chaque cas, les deux derniers arguments: « false », « false » signifient que ce nouvel élément ne sera pas la valeur par défaut, ni sélectionné.

Et c’est tout!

Résumé

Le constructeur Option() peu connu peut être utilisé pour créer de nouveaux éléments d’option HTML. Ainsi, selon la façon dont vous choisissez d’aborder cela, vous pouvez écrire du code assez efficace qui accompagne la syntaxe normalement verbeuse du document.createTextNode(), document.createElement(), et document.Méthodes appendChild().

Liens utiles pour le constructeur JavaScript Option()