Populate Textbox basierend auf Dropdown -Auswahl - JavaScript

Bei der Entwicklung einer Webanwendung ist es normal, ein Formular mit einer Dropdown-Liste und einem Textfeld hinzuzufügen. Der Benutzer kann einen Wert aus einer Reihe von Optionen auswählen, die die Dropdown-Liste unter Verwendung der Dropdown-Liste auswählen. Der ausgewählte Wert ist im Textfeld angezeigt. Verwenden Sie zum Erreichen dieser Funktionalität das “ändern"Ereignis mit Hilfe der"AddEventListener ()" Methode.

In diesem Artikel wird das Verfahren definiert, um das Textfeld abhängig von der Dropdown-Auswahl mit JavaScript zu füllen.

So füllen Sie eine Textbox basierend auf der Dropdown-Auswahl in JavaScript?

Verwenden Sie die Dropdowns, um ein Textfeld basierend auf einer Dropdown-Auswahl zu füllen oder zu füllenändernEreignis, das die ausgewählte Option vom Benutzer erkennt und den Wert des Textfelds festlegt.

Beispiel
Erstellen Sie eine Beschriftung für Dropdown mit dem HTML-Element namens:

Wählen Sie eine Sprache aus, die Sie lernen möchten:

Erstellen Sie eine Dropdown-Liste mit den und Tags. Die Dropdown enthält die Liste der Sprachen:

Wählen…
Html
CSS
JavaScript
Java
Python

Hier erstellen wir ein Textfeld mit “schreibgeschützt”Attribut, das automatisch mit der ausgewählten Option ausgefüllt wird:

Ausgewählte Sprache:

In der JavaScript -Datei oder einem Tag erhalten wir zunächst die Referenz beider Elemente "Dropdown" als auch die "Textbox" mithilfe der zugewiesenen IDs mit Hilfe von "GetElementById ()" Methode:

const Dropdown = Dokument.GetElementById ('Dropdown');
const textbox = dokument.getElementById ('textbox');

Ruf den "AddEventListener ()Methode auf der Dropdown- und Verwendung der “ändernEreignis, das abgefeuert wird, wenn die Option aus der Dropdown -Liste ausgewählt wird. Rufen Sie den ausgewählten Wert mit der “abZiel.Wert”Attribut und setzen Sie es in der Textbox mit der“ festWert”Attribut:

Dropdown-Liste.AddEventListener ('Change', (Ereignis) =>
const SelectedSlanguage = Ereignis.Ziel.Wert;
Textfeld.value = selectedSlanguage;
);

Die Ausgabe zeigt an, dass der ausgewählte Wert aus der Dropdown -Adresse im Textfeld erfolgreich hinzugefügt wurde:

Das dreht sich nur um das bevölkerungsübergreifende Textfeld basierend auf der Dropdown -Auswahl in JavaScript.

Abschluss

Um ein Textfeld basierend auf einer Dropdown-Auswahl zu füllen oder zu füllen, verwenden Sie die Dropdowns 'ändern" Fall. Es wird die vom Benutzer ausgewählte Option erfasst und als Textbox -Wert festgelegt. In diesem Artikel wurde das Prozedur zum Ausfüllen des Textfelds je nach Dropdown -Auswahl mit JavaScript beschrieben.