Comment ajouter des options à sélectionner avec JavaScript

En JavaScript, nous rencontrons généralement un défi où nous devons inclure une liste complexe dans laquelle nous voulons ajouter ou modifier une option dans le cas des mises à jour ou des modifications de critères. De plus, avoir de nombreuses options et un manque de manipulation des catégories peuvent causer des problèmes dans les scénarios manuels. Dans ces scénarios, les méthodes JavaScript fournies pour ajouter de nouvelles options peuvent vous sauver.

Cet article guidera sur l'ajout d'options à sélectionner avec JavaScript.

Comment ajouter / insérer des options à sélectionner avec JavaScript?

Nous pouvons ajouter des options à sélectionner avec JavaScript en utilisant trois méthodes simples:

• "document.CreateElement ()" méthode
• "Jquery" Bibliothèque
• "Option()»Constructeur

Nous allons maintenant passer par chacune des approches mentionnées une par une!

Méthode 1: Ajouter des options à sélectionner avec JavaScript à l'aide du document.Méthode CreateElement ()

Le "document.CreateElement ()»La méthode crée un nœud d'élément. Vous pouvez également utiliser cette méthode pour créer une option supplémentaire dans la liste des options existantes. Cette fonctionnalité sera obtenue en incluant un bouton qui ajoutera l'option spécifiée à la liste lorsque vous cliquez sur.

Pour ajouter des options à sélectionner avec JavaScript à l'aide du document.Méthode CreateElement (), vous devez suivre la syntaxe donnée ci-dessous.

Syntaxe

document.CreateElement (type)

Ici, "taper»Fait référence au type d'élément qui doit être créé.

Regardez l'exemple suivant pour comprendre le concept déclaré.

Exemple
Dans l'exemple ci-dessous, nous attribuerons un ID spécifique, «addoptions"Et la taille"3», Qui fait référence à la taille du conteneur dans lequel trois options sont placées. Maintenant, nous allons attribuer les valeurs des options nommées «Python" et "Java". Après cela, ajoutez un bouton avec un "sur clic" événement. Cela fonctionnera de telle manière que lorsque le bouton sera enfoncé, la fonction "addoptions ()"Sera déclenché:

Python
Java

Ajouter une nouvelle option

À l'étape suivante, nous définirons la fonction "addoptions ()»Et accédez à l'ID spécifié de SELECT en utilisant le«document.getElementByid ()" méthode. Après cela, nous créerons un «option»Élément pour ajouter une nouvelle valeur dans la liste des options.

Enfin, nous attribuerons une valeur "Javascrip"À l'option spécifique et ajoutez-le à la liste des options à l'aide du"ajouter()" méthode:

La sortie de l'implémentation ci-dessus en résultera comme suit:

Méthode 2: Ajouter des options à sélectionner avec JavaScript à l'aide de jQuery

"Jquery"Est une bibliothèque JavaScript essentielle qui simplifie la programmation JavaScript. Vous pouvez utiliser son "ajouter()”Méthode pour ajouter une option et attribuer une valeur spécifique à cette option particulière.

Passons par l'exemple suivant pour la démonstration.

Exemple
Dans le même fichier HTML, nous inclurons désormais une bibliothèque jQuery dans le HTML "" étiqueter:

Ensuite, nous appliquerons les fonctionnalités pour ajouter une option dans la liste des options dans une fonction nommée «addoptions ()". Ici, nous allons accéder à l'ID de sélection en utilisant "#addoptions», Ajoutez une nouvelle option en utilisant«ajouter()«Méthode à l'aide du«val ()" et "texte()»Méthodes:

La sortie résultante sera:

Méthode 3: Ajouter des options à sélectionner avec JavaScript à l'aide de l'option () Constructeur

Le "Option()"Le constructeur crée un nouveau"HtmloptionElement". Il peut être utilisé pour ajouter un nouveau créneau pour une option supplémentaire nommée «Javascrip".

Pour ajouter des options à sélectionner avec JavaScript à l'aide de la méthode du constructeur Option (), vous devez suivre la syntaxe divisée ci-dessous.

Syntaxe

Nouvelle option (texte, valeur)

Ici, "texte"Représente le contenu de l'élément, et"valeur»Fait référence à la valeur de HTMLoptionElement

Exemple
Nous allons maintenant utiliser le «addoptions ()”Fonction pour obtenir l'ID de sélection à l'aide du"document.getElementByid ()" méthode. Ensuite, appelez le «Option()"Constructeur et placez la valeur de l'option"Javascrip"Dans ce. Après cela, le «APPENDCHILD ()»La méthode ajoutera la valeur de l'option spécifiée à la fin de la liste:

Sortir

Nous avons fourni des méthodes les plus simples pour ajouter des options à sélectionner avec JavaScript.

Conclusion

Pour ajouter des options pour sélectionner avec JavaScript, vous pouvez utiliser le «document.CreateElement ()”Méthode pour créer un élément d'option et y compris la valeur d'option spécifiée ou le"Jquery”Bibliothèque ou"Option()»Méthode du constructeur pour ajouter un nouveau créneau pour une option supplémentaire et ajouter sa valeur dans la liste des options. Cet article vous a guidé sur l'ajout d'options à sélectionner avec JavaScript.