Remplit la zone de texte basée sur la sélection déroulante - JavaScript

Lors du développement d'une application Web, il est normal d'ajouter un formulaire avec une liste déroulante et une zone de texte. L'utilisateur peut sélectionner une valeur dans un certain nombre d'options à l'aide de la liste déroulante, et la valeur sélectionnée est affichée dans la zone de texte. Pour atteindre cette fonctionnalité, utilisez le «changement»Événement avec l'aide du«addEventListener ()" méthode.

Cet article définira la procédure pour remplir la zone de texte en fonction de la sélection déroulante à l'aide de JavaScript.

Comment remplir la zone de texte basée sur la sélection déroulante dans JavaScript?

Pour remplir ou remplir une zone de texte basée sur une sélection déroulante, utilisez le déroulement de la liste déroulante "changement»Événement qui détectera l'option sélectionnée par l'utilisateur et définira la valeur de la zone de texte.

Exemple
Créez une étiquette pour la liste déroulante à l'aide de l'élément HTML appelé:

Sélectionnez une langue que vous souhaitez apprendre:

Créez une liste déroulante à l'aide des balises et. La liste déroulante contient la liste des langues:

Sélectionner…
Html
CSS
Javascrip
Java
Python

Ici, nous allons créer une zone de texte avec «lecture seulement”Attribut qui remplira automatiquement avec l'option sélectionnée:

Langue sélectionnée:

Maintenant, dans le fichier JavaScript, ou une balise, nous obtiendrons d'abord la référence des deux éléments "Dropdown" et de la "zone de texte" en utilisant leurs ID attribués à l'aide de "getElementByid ()" méthode:

const Dropdown = Document.GetElementById («Dropdown»);
const TextBox = document.getElementById ('TextBox');

Appeler le "addEventListener ()«Méthode sur la liste déroulante et utilisez le«changement»Événement qui sera licencié lorsque l'option sera sélectionnée dans la liste déroulante. Récupérez la valeur sélectionnée à l'aide du «cible.valeur«Attribut et définissez-le dans la zone de texte en utilisant le«valeur" attribut:

menu déroulant.addEventListener ('change', (événement) =>
const selectedLanguage = événement.cible.valeur;
zone de texte.valeur = selectedLanguage;
);

La sortie indique que la valeur sélectionnée dans la liste déroulante a été ajoutée avec succès dans la zone de texte:

C'est tout au sujet de la zone de texte peupuleuse basée sur la sélection déroulante dans JavaScript.

Conclusion

Pour remplir ou remplir une zone de texte basée sur une sélection déroulante, utilisez le déroulement "changement" événement. Il détectera l'option sélectionnée par l'utilisateur et les définira comme valeur de la zone de texte. Cet article a décrit la procédure pour remplir la zone de texte en fonction de la sélection déroulante à l'aide de JavaScript.