Zapełniaj pola tekstowe na podstawie wyboru rozwijanego - JavaScript

Podczas opracowywania aplikacji internetowej normalne jest dodanie formularza z rozwijaną listą i pola tekstowym. Użytkownik może wybrać wartość z wielu opcji za pomocą listy rozwijanej, a wybrana wartość jest wyświetlana na polu tekstowym. Aby osiągnąć tę funkcjonalność, użyj „zmiana„Wydarzenie z pomocą„addEventListener ()" metoda.

W tym artykule zdefiniuje procedurę wypełnienia pola tekstowego w zależności od wyboru rozwijanego za pomocą JavaScript.

Jak zapełnić pola tekstowe na podstawie rozwijanego wyboru w JavaScript?

Aby zapełnić lub wypełnić tekst na podstawie rozwijanego wyboru, skorzystaj z rozwijanego „zmiana„Zdarzenie, które wykryje wybraną opcję przez użytkownika i ustawę wartość tekstu tekstowego.

Przykład
Utwórz etykietę do rozwijania za pomocą elementu HTML o nazwie:

Wybierz język, którego chcesz się nauczyć:

Utwórz listę rozwijaną za pomocą i tagów. Rozwijanie zawiera listę języków:

Wybierać…
Html
CSS
JavaScript
Jawa
Pyton

Tutaj utworzymy pola tekstowe z „tylko czytać”Atrybut, który zapełni się automatycznie z wybraną opcją:

Wybrany język:

Teraz, w pliku JavaScript lub tag, po pierwsze, otrzymamy odniesienie zarówno „rozwijanego” elementów, jak i „pola tekstowego” za pomocą przypisanych identyfikatorów za pomocą „getElementById ()" metoda:

const rzut = dokument.getElementById („rozwijanie”);
const TextBox = dokument.getElementById („textbox”);

Zadzwoń do "addEventListener ()„Metoda modułu rozwijanego i użyj„zmiana„Wydarzenie, które zostanie zwolnione, gdy opcja zostanie wybrana z listy rozwijanej. Odzyskać wybraną wartość za pomocą „cel.wartość”Atrybut i ustaw go w polu tekstowym za pomocą„wartość" atrybut:

upuścić.addEventListener („zmiana”, (event) =>
const selectedLanguage = zdarzenie.cel.wartość;
pole tekstowe.wartość = wybrana language;
);

Dane wyjściowe wskazuje, że wybrana wartość z menu została pomyślnie dodana w polu tekstowym:

To wszystko o zaludnionym polu tekstowym na podstawie wyboru rozwijanego w JavaScript.

Wniosek

Aby zapełnić lub wypełnić pola tekstowe na podstawie wyboru rozwijanego, użyj rozwijanego „zmiana" wydarzenie. Wykryje opcję wybraną przez użytkownika i ustawi je jako wartość tekstu tekstowego. W tym artykule opisano procedurę wypełnienia pola tekstowego w zależności od wyboru rozwijanego za pomocą JavaScript.