Populere TextBox basert på rullegardinvalg - JavaScript

Mens du utvikler en webapplikasjon, er det normalt å legge til et skjema med en rullegardinliste og en tekstboks. Brukeren kan velge en verdi fra en rekke alternativer ved hjelp av rullegardinlisten, og den valgte verdien vises i tekstboksen. For å oppnå denne funksjonaliteten, bruk "endring”Arrangement ved hjelp av“AddEventListener ()”Metode.

Denne artikkelen vil definere prosedyren for å fylle tekstboksen avhengig av rullegardinvalget ved hjelp av JavaScript.

Hvordan du fyller tekstboks basert på rullegardinvalg i JavaScript?

For å fylle ut eller fylle en tekstboks basert på et rullegardinvalg, bruk rullegardinmenyen “endring”Hendelse som vil oppdage det valgte alternativet av brukeren og angi tekstboksens verdi.

Eksempel
Lag en etikett for nedtrekk ved bruk av HTML-elementet som heter:

Velg et språk du vil lære:

Lag en rullegardinliste ved hjelp av og taggene. Rullegardinmenyen inneholder listen over språk:

Plukke ut…
Html
CSS
JavaScript
Java
Python

Her oppretter vi en tekstboks med "readonly”Attributt som automatisk vil fylle ut det valgte alternativet:

Valgt språk:

Nå, i JavaScript -filen, eller en tag, vil vi først få referansen til begge elementene "rullegardinmenyen" og "tekstboksen" ved å bruke deres tildelte ID -er ved hjelp av "getElementById ()”Metode:

const rullegardin = dokument.getElementById ('rullegardins');
const textbox = dokument.getElementById ('TextBox');

Ring "AddEventListener ()”Metode på rullegardinmenyen og bruk“endring”Arrangement som vil bli avfyrt når alternativet er valgt fra rullegardinlisten. Hente den valgte verdien ved å bruke “mål.verdi”Attributt og sett den i tekstboksen ved å bruke“verdi" Egenskap:

fall ned.AddEventListener ('endring', (hendelse) =>
const SelectedLanguage = Event.mål.verdi;
tekstboks.verdi = valgt språket;
);

Utgangen indikerer at den valgte verdien fra rullegardinmenyen har blitt lagt til i tekstboksen:

Det handler om den befolkerende tekstboksen basert på rullegardinvalget i JavaScript.

Konklusjon

For å fylle ut eller fylle en tekstboks basert på et rullegardinvalg, bruk rullegardinmenyen “endring" begivenhet. Det vil oppdage alternativet valgt av brukeren og angi dem som en tekstboks verdi. Denne artikkelen beskrev prosedyren for å fylle tekstboksen avhengig av rullegardinvalget ved hjelp av JavaScript.