POPULE TEXTBOX in base alla selezione a discesa - JavaScript

Durante lo sviluppo di un'applicazione Web, è normale aggiungere un modulo con un elenco a discesa e una casella di testo. L'utente può selezionare un valore da una serie di opzioni utilizzando l'elenco a discesa e il valore selezionato è mostrato nella casella di testo. Per raggiungere questa funzionalità, usa il "modificaEvento "con l'aiuto del"addEventListener ()" metodo.

Questo articolo definirà la procedura per riempire la casella di testo in base alla selezione a discesa utilizzando JavaScript.

Come popolare la casella di testo in base alla selezione a discesa in JavaScript?

Per popolare o riempire una casella di testo in base a una selezione a discesa, utilizza il drop-down "modifica"Evento che rileverà l'opzione selezionata dall'utente e imposterà il valore della casella di testo.

Esempio
Crea un'etichetta per il menu a discesa utilizzando l'elemento HTML chiamato:

Seleziona una lingua che vuoi imparare:

Crea un elenco a discesa utilizzando i tag. Il menu a discesa contiene l'elenco delle lingue:

Selezionare…
Html
CSS
JavaScript
Giava
Pitone

Qui, creeremo una casella di testo con "sola lettura"Attributo che popolerà automaticamente con l'opzione selezionata:

Lingua selezionata:

Ora, nel file JavaScript, o un tag, in primo luogo, otterremo il riferimento di entrambi gli elementi "Dropdown" e la "casella di testo" utilizzando i loro ID assegnati con l'aiuto di "getElementById ()" metodo:

const dropdown = documento.getElementById ('dropdown');
const textBox = document.getElementById ('TextBox');

Chiama il "addEventListener ()"Metodo sul discesa e usa il"modifica"Evento che verrà licenziato quando l'opzione viene selezionata dall'elenco a discesa. Recupera il valore selezionato usando "bersaglio.valore"Attributo e impostalo nella casella di testo usando"valore"Attributo:

cadere in picchiata.addEventListener ('Change', (event) =>
const selectedLanguage = evento.bersaglio.valore;
casella di testo.value = selectedLanguage;
);

L'output indica che il valore selezionato dal discesa è stato aggiunto correttamente nella casella di testo:

Riguarda la casella di testo che popola in base alla selezione a discesa in JavaScript.

Conclusione

Per popolare o riempire una casella di testo in base a una selezione a discesa, usa il drop-down "modifica"Evento. Rileggerà l'opzione selezionata dall'utente e le imposterà come valore di una casella di testo. Questo articolo ha descritto la procedura per riempire la casella di testo in base alla selezione a discesa utilizzando JavaScript.