Denne vejledning vil definere proceduren for at tilføje en indstilling fra en inputtekst til et udvalgt tag ved hjælp af JavaScript.
Sådan tilføjer du mulighed for at vælge tag fra inputtekst ved hjælp af JavaScript?
For at tilføje en indstilling fra en inputtekst til et markeret tag ved hjælp af JavaScript kan du bruge forskellige metoder, såsom:
Lad os udforske hver metode en efter en!
Metode 1: Tilføj mulighed for at vælge tag fra inputtekst ved hjælp af add() metode med Option Constructor
For at tilføje en mulighed fra inputteksten i et markeret tag skal du bruge ' tilføje() ' metode med ' Mulighed 'Konstruktør. Add() metoden bruges til at tilføje elementerne til mulighederne for ' HTMLSelectElement ” også kendt som
Syntaks
Følg den angivne syntaks for at bruge add()-metoden til at tilføje en mulighed i et select-tag:
tilføje ( option, eksisterende Mulighed ) ;Her er ' mulighed ' repræsenterer den nye mulighed, der vil blive tilføjet i stedet for ' eksisterende Mulighed ”.
Eksempel
Vi vil oprette et inputfelt, en rullemenu ved hjælp af
< vælg id = 'muligheder' >
< option værdi = 'c' > C mulighed >
Vælg >
< br >< br >
< knap-id = 'tilføj btn' onclick = 'insertOption()' > Tilføj mulighed knap >
I JS-filen skal du definere en funktion med navnet ' insertOption() ' og få derefter adgang til knappen, tekstboksen og det valgte element med deres tildelte id'er ved hjælp af ' querySelector() ” metode. Opret derefter en forekomst af indstillingen ved hjælp af Option-konstruktøren, og kald add()-metoden ved at videregive den eksisterende indstilling og den nye indstilling, der skal tilføjes i slutningen af listen:
funktionindsætMulighed ( ){
konst addBtn = dokument. querySelector ( '#addbtn' ) ;
konst listeboks = dokument. querySelector ( '#muligheder' ) ;
konst dropdown = dokument. querySelector ( '#txt' ) ;
konst mulighed = ny Mulighed ( dropdown. værdi , dropdown. værdi ) ;
listeboks. tilføje ( mulighed, udefineret ) ;
dropdown. værdi = '' ;
dropdown. fokus ( ) ;
}
Outputtet viser, at den nye mulighed fra tekstfeltet tilføjes i slutningen af rullemenuen:
Bemærk: Du kan bruge denne metode til at tilføje indstillingen i begyndelsen af markeringen ved at tilføje værdien af den eksisterende indstilling som en anden parameter i stedet for udefineret. Det vil tilføje den nye mulighed før den eksisterende.
Lad os gå til den anden metode!
Metode 2: Tilføj mulighed for at vælge tag fra inputtekst ved hjælp af createElement() med appendChild() metode
Der er en anden tilgang, hvor du kan oprette et nyt element ved hjælp af ' createElement() ' metode med ' appendChild() ” metode. Ved at bruge denne metode tilføjer vi mulighederne i begyndelsen af markeringen.
Syntaks
Brug følgende syntaks til at tilføje valgmulighed i select tag fra inputteksten ved hjælp af appendChild() metoden:
vedhæfteBarn ( newOptionValue ) ;Eksempel
Her vil vi oprette en rulleliste ved at tilføje to muligheder ' C ' og ' C++ ', et inputfelt og en knap, der kalder den brugerdefinerede JavaScript-funktion med navnet ' insertOption() ” når dens onclick-hændelse udløses:
< input type = 'tekst' id = 'txt' pladsholder = 'Indtast tekst for at tilføje mulighed' >< vælg id = 'dropdown' >
< mulighed > C mulighed >
< mulighed > C ++ mulighed >
Vælg >
< br >< br >
< knap ved klik = 'insertOption();' > Tilføj mulighed knap >
I en funktion ved navn ' insertOption() ”, skal du først få adgang til select-elementet og tekstfeltet ved hjælp af deres tildelte id'er og derefter kalde createElement()- og createTextNode()-metoderne for at oprette en option-instans og hente tekstværdien som en option. Kald derefter appendChild()-metoden og send tekstværdien som en mulighed, og tilføj derefter denne mulighed i begyndelsen af udvalgslisten ved hjælp af ' insertBefore() ”-metode med udvalgselement:
funktionindsætMulighed ( ){
var vælg = dokument. getElementById ( 'dropdown' ) ,
tekstVærdi = dokument. getElementById ( 'txt' ) . værdi ,
ny Mulighed = dokument. skabeElement ( 'Mulighed' ) ,
newOptionValue = dokument. opretTextNode ( tekstVærdi ) ;
ny Mulighed. vedhæfteBarn ( newOptionValue ) ;
Vælg. indsætFør ( nyValg, vælg. førstebarn ) ;
}
Som du kan se, at outputtet viser, at den nye mulighed fra tekstfeltet tilføjes i starten af rullemenuen:
Vi har samlet alle de mulige løsninger til tilføjelse af muligheder fra en inputtekst til markeringen.
Konklusion
For at tilføje en indstilling fra en inputtekst til et markeret tag ved hjælp af JavaScript, kan du bruge de indbyggede JavaScript-metoder, herunder add()-metoden eller appendChild()-metoden. Du kan tilføje indstillinger i et markeret tag i begyndelsen af listen såvel som i slutningen af listen. I denne øvelse har vi defineret proceduren for at tilføje en mulighed fra en inputtekst til et udvalgt tag ved hjælp af JavaScript med detaljerede eksempler.