Comment ajouter une option pour sélectionner la balise à partir du texte d'entrée à l'aide de JavaScript

Lors du développement d'un site Web, il peut y avoir une exigence pour ajouter de nouvelles options à l'élément sélectionné dynamiquement, ce qui devient difficile pour les débutants. Dans une telle situation, vous pouvez utiliser différentes méthodes JavaScript dans le but d'ajouter des options à la balise de sélection dans le texte d'entrée ajouté. Je ne sais pas comment?

Ce tutoriel 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 la balise à partir du texte d'entrée à l'aide de JavaScript?

Pour ajouter une option à partir d'un texte d'entrée à une balise de sélection à l'aide de JavaScript, vous pouvez utiliser différentes méthodes, telles que:

• Add () Méthode avec le constructeur d'options
• Méthode CreateElement () avec une méthode appenchild ()

Explorons chaque méthode une par une!

Méthode 1: Ajouter une option pour sélectionner la balise dans le texte d'entrée à l'aide de Add () Méthode 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 () est utilisée pour ajouter les éléments aux options du «HtmlSelectElement”Également connu sous le nom de tag. Il faut deux paramètres comme arguments.

Syntaxe

Suivez la syntaxe fournie pour utiliser la méthode Add () pour ajouter une option dans une balise de sélection:

Add (option, existant OIPTION);

Ici le "option"Représente la nouvelle option qui va être ajoutée à la place du"Option existant".

Exemple

Nous allons créer un champ de saisie, un menu déroulant en utilisant Tag et un bouton qui ajoutera de nouvelles options dans un élément sélectionné, invoquant le "insertOption ()”Fonction quand il est cliqué:

C




Ajouter l'option

Dans le fichier JS, définissez une fonction nommée «insertOption ()"Puis accédez au bouton, à la zone de texte et à l'élément sélectionné avec leurs identifiants attribués à l'aide du"QuerySelector ()" méthode. Ensuite, créez une instance de l'option à l'aide du constructeur d'options 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 ()

const addbtn = document.queySelector ('# addBtn');
const listbox = document.queySelector ('# Options');
const Dropdown = Document.queySelector ('# txt');
CONS OPTION = nouvelle option (Dropdown.valeur, liste déroulante.valeur);
liste de listes.ajouter (option, undefined);
menu déroulant.value = ";
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:

Note: Vous pouvez utiliser cette méthode pour ajouter l'option au début de la balise de sélection en ajoutant la valeur de l'option existante comme deuxième paramètre au lieu de non défini. Il ajoutera la nouvelle option avant la.

Passons à l'autre méthode!

Méthode 2: Ajouter une option pour sélectionner la balise à partir du texte d'entrée à l'aide de CreateElement () avec une méthode APPEDCHILD ()

Il existe une autre approche en utilisant lequel vous pouvez créer un nouvel élément en utilisant le «CreateElement ()«Méthode avec le«APPENDCHILD ()" méthode. En utilisant cette méthodologie, nous ajouterons les options au début de la balise de sélection.

Syntaxe

Utilisez la syntaxe suivante pour ajouter une option dans SELECT TAG dans le texte d'entrée à l'aide de la méthode APPEDCHILD ():

APPENDCHILD (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é«insertOption ()«Lorsque son événement OnClick est déclenché:

C
C++




Ajouter l'option

Dans une fonction nommée «insertOption ()», Accédez d'abord à l'élément sélectionné et au champ de texte en utilisant leurs ID attribués, puis appelez les méthodes CreateElement () et CreateTextNode () pour créer une instance d'option et récupérer la valeur du texte en tant qu'option. Après cela, appelez la méthode APPEDCHILD () et passez la valeur du texte en tant qu'option, ajoutez cette option au début de la liste de sélection à l'aide de "insertFore ()”Méthode avec l'élément sélectionné:

functionInsertOption ()

var select = document.GetElementByid ("Dropdown"),
textValue = document.getElementByid ("txt").valeur,
newOption = document.CreateElement ("Option"),
newOptionValue = document.CreateTextNode (TextValue);
newoption.APPENDCHILD (NewOptionValue);
sélectionner.INSERTBEFORE (NEWOPTION, SELECT.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 à partir d'un texte d'entrée à la balise de sélection.

Conclusion

Pour ajouter une option à partir 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, y compris la méthode Add () ou la méthode APPEDCHILD (). Vous pouvez ajouter des options dans une balise de sélection au début de la liste ainsi que la fin de la liste. Dans ce tutoriel, nous avons défini la procédure pour ajouter une option à partir d'un texte d'entrée à une balise de sélection utilisant JavaScript avec des exemples détaillés.