Ce didacticiel définira la procédure pour ajouter une option d'un texte d'entrée à une balise de sélection à l'aide de JavaScript.
Comment ajouter une option pour sélectionner une balise à partir du texte d'entrée à l'aide de JavaScript ?
Pour ajouter une option d'un texte d'entrée à une balise de sélection à l'aide de JavaScript, vous pouvez utiliser différentes méthodes, telles que :
Explorons chaque méthode une par une !
Méthode 1: ajouter une option pour sélectionner une balise à partir du texte d'entrée à l'aide de la méthode add () avec le constructeur d'options
Pour ajouter une option à partir du texte d'entrée dans une balise de sélection, utilisez le ' ajouter() 'méthode avec' Option « Constructeur. La méthode add() permet d'ajouter les éléments aux options du ' HTMLSelectElement ” également connu sous le nom de balise
Syntaxe
Suivez la syntaxe fournie pour utiliser la méthode add() pour ajouter une option dans une balise select :
ajouter ( option, option existante ) ;Ici le ' option ' représente la nouvelle option qui va être ajoutée à la place du ' existantOption ”.
Exemple
Nous allons créer un champ de saisie, un menu déroulant à l'aide de
< sélectionner l'identifiant = 'options' >
< valeur d'option = 'c' > C option >
sélectionner >
< Br >< Br >
< identifiant du bouton = 'ajouter btn' sur clic = 'insérerOption()' > Ajouter une option bouton >
Dans le fichier JS, définissez une fonction nommée ' insertOption() ', puis accédez au bouton, à la zone de texte et à l'élément de sélection avec leurs identifiants attribués à l'aide de la touche' querySelector() ' méthode. Ensuite, créez une instance de l'option à l'aide du constructeur Option et appelez la méthode add() en passant l'option existante et la nouvelle option qui doit être ajoutée à la fin de la liste :
functioninsertOption ( ){
constante addBtn = document. querySelector ( '#addbtn' ) ;
constante zone de liste = document. querySelector ( '#options' ) ;
constante menu déroulant = document. querySelector ( '#SMS' ) ;
constante option = Nouveau Option ( menu déroulant. évaluer , menu déroulant. évaluer ) ;
zone de liste. ajouter ( option, indéfini ) ;
menu déroulant. évaluer = '' ;
menu déroulant. se concentrer ( ) ;
}
La sortie montre que la nouvelle option du champ de texte est ajoutée à la fin du menu déroulant :
Noter: Vous pouvez utiliser cette méthode pour ajouter l'option au début de la balise select en ajoutant la valeur de l'option existante comme second paramètre au lieu de undefined. Il ajoutera la nouvelle option avant celle existante.
Passons à l'autre méthode !
Méthode 2: ajouter une option pour sélectionner une balise à partir du texte d'entrée à l'aide de createElement () avec la méthode appendChild ()
Il existe une autre approche à l'aide de laquelle vous pouvez créer un nouvel élément en utilisant le ' créerÉlément() ' méthode avec le ' ajouterEnfant() ' méthode. En utilisant cette méthodologie, nous ajouterons les options au début de la balise select.
Syntaxe
Utilisez la syntaxe suivante pour ajouter une option dans la balise select à partir du texte d'entrée à l'aide de la méthode appendChild() :
ajouterEnfant ( newOptionValue ) ;Exemple
Ici, nous allons créer une liste déroulante en ajoutant deux options ' C ' et ' C++ », un champ de saisie et un bouton qui appellera la fonction JavaScript définie par l'utilisateur nommée « insertOption() ” lorsque son événement onclick est déclenché :
< type d'entrée = 'texte' identifiant = 'SMS' espace réservé = 'Entrez le texte pour ajouter l'option' >< sélectionner l'identifiant = 'menu déroulant' >
< option > C option >
< option > C ++ option >
sélectionner >
< Br >< Br >
< bouton onclick = 'insérerOption();' > Ajouter une option bouton >
Dans une fonction nommée ' insertOption() ', accédez d'abord à l'élément select et au champ de texte à l'aide de leurs identifiants attribués, puis appelez les méthodes createElement () et createTextNode () pour créer une instance d'option et récupérer la valeur de texte en tant qu'option. Après cela, appelez la méthode appendChild () et transmettez la valeur du texte en option, puis ajoutez cette option au début de la liste de sélection en utilisant ' insérerAvant() ” méthode avec élément select :
functioninsertOption ( ){
var sélectionner = document. getElementById ( 'menu déroulant' ) ,
valeurtexte = document. getElementById ( 'SMS' ) . évaluer ,
nouvelleOption = document. créerÉlément ( 'Option' ) ,
newOptionValue = document. createTextNode ( valeurtexte ) ;
nouvelleOption. ajouterEnfant ( newOptionValue ) ;
sélectionner. insérerAvant ( nouvelleOption, sélectionnez. premier enfant ) ;
}
Comme vous pouvez le voir, la sortie montre que la nouvelle option du champ de texte est ajoutée au début du menu déroulant :
Nous avons compilé toutes les solutions possibles pour ajouter des options d'un texte d'entrée à la balise select.
Conclusion
Pour ajouter une option d'un texte d'entrée à une balise de sélection à l'aide de JavaScript, vous pouvez utiliser les méthodes intégrées JavaScript, notamment la méthode add() ou la méthode appendChild(). Vous pouvez ajouter des options dans une balise select au début de la liste ainsi qu'à la fin de la liste. Dans ce didacticiel, nous avons défini la procédure pour ajouter une option d'un texte d'entrée à une balise de sélection à l'aide de JavaScript avec des exemples détaillés.