Hvordan legge til alternativ for å velge tag fra inngangstekst ved hjelp av JavaScript

Mens du utvikler et nettsted, kan det være et krav å legge til nye alternativer til det utvalgte elementet dynamisk, noe som blir utfordrende for nybegynnere. I en slik situasjon kan du bruke forskjellige JavaScript -metoder med det formål å legge til alternativer til Select -taggen fra den ekstra inngangsteksten. Vet ikke hvordan?

Denne opplæringen vil definere prosedyren for å legge til et alternativ fra en inngangstekst til en valgt tagg ved hjelp av JavaScript.

Hvordan legge til alternativ for å velge tag fra inngangstekst ved hjelp av JavaScript?

For å legge til et alternativ fra en inngangstekst til en valgt tagg ved hjelp av JavaScript, kan du bruke forskjellige metoder, for eksempel:

• Legg til () Metode med alternativkonstruktør
• CreateElement () -metode med AppendChild () -metode

La oss utforske hver metode en etter en!

Metode 1: Legg til alternativ for å velge tag fra inngangstekst ved hjelp av add () -metode med alternativkonstruktør

For å legge til et alternativ fra inngangsteksten i en valgt tag, bruk "Legg til()”Metode med“Alternativ”Konstruktør. ADD () -metoden brukes til å legge elementene til alternativene til "HTMLSelectElement”Også kjent som tag. Det tar to parametere som argumenter.

Syntaks

Følg den medfølgende syntaksen for å bruke ADD () -metoden for å legge til et alternativ i en valgt tagg:

Legg til (alternativ, eksisterendeoption);

Her, "alternativ”Representerer det nye alternativet som kommer til å bli lagt til i stedet for“Eksisterendeoption”.

Eksempel

Vi oppretter et inngangsfelt, en rullegardinmeny ved hjelp av Tag og en knapp som vil legge til nye alternativer i et valgt element, og påkalle "innsats ()”Funksjon når det er klikket:

C




Legg til alternativ

I JS -filen, definer en funksjon som heter “innsats ()”Og tilgang til knappen, tekstboksen og det valgte elementet med deres tildelte ID -er som bruker“QuerySelector ()”Metode. Opprett deretter en forekomst av alternativet ved hjelp av alternativkonstruktøren, og ring ADD () -metoden ved å passere det eksisterende alternativet og det nye alternativet som må legges til på slutten av listen:

FunctionInSertOption ()

const addBtn = dokument.QuerySelector ('#addBtn');
const listBox = dokument.QuerySelector ('#Alternativer');
const rullegardin = dokument.QuerySelector ('#txt');
const alternativ = nytt alternativ (rullegardin.Verdi, rullegardin.verdi);
ListBox.Legg til (alternativ, udefinert);
fall ned.verdi = ";
fall ned.fokus();

Utgangen viser at det nye alternativet fra tekstfeltet legges til på slutten av rullegardinmenyen:

Merk: Du kan bruke denne metoden til å legge til alternativet i begynnelsen av SELECT -taggen ved å legge til verdien av det eksisterende alternativet som en andre parameter i stedet for udefinert. Det vil legge til det nye alternativet før den eksisterende.

La oss flytte til den andre metoden!

Metode 2: Legg til alternativ for å velge tag fra inngangstekst ved hjelp av createElement () med appendchild () -metode

Det er en annen tilnærming som du kan lage et nytt element ved hjelp av “CreateElement ()”Metode med“vedlegg ()”Metode. Ved å bruke denne metodikken vil vi legge til alternativene i begynnelsen av Select -taggen.

Syntaks

Bruk følgende syntaks for å legge til alternativ i SELECT -taggen fra inngangsteksten ved hjelp av AppendChild () -metoden:

appendchild (newOptionValue);

Eksempel

Her oppretter vi en rullegardinliste ved å legge til to alternativer “C”Og“C++”, Et inngangsfelt og en knapp som vil kalle den brukerdefinerte JavaScript-funksjonen som heter“innsats ()”Når OnClick -hendelsen utløses:

C
C++




Legg til alternativ

I en funksjon som heter “innsats ()”, Først tilgang til Select Element og tekstfeltet ved å bruke sine tildelte ID -er og deretter ringe CreateElement () og CreateTextNode () -metodene for å lage en alternativ forekomst og hente tekstverdien som et alternativ. Etter det, ring AppledChild () -metoden og send tekstverdien som et alternativ da, legg til dette alternativet i begynnelsen av SELECT -listen ved å bruke "INSERTBEFORE ()”Metode med valgt element:

FunctionInSertOption ()

var velg = dokument.getElementById ("Dropdown"),
textValue = dokument.getElementById ("TXT").verdi,
newOption = dokument.CreateElement ("Alternativ"),
newOptionValue = dokument.CreateTextNode (TextValue);
NewOption.appendchild (newOptionValue);
plukke ut.Sett inn før (NewOption, velg.første barn);

Som du kan se at utdataene viser at det nye alternativet fra tekstfeltet legges til i starten av rullegardinmenyen:

Vi har samlet alle mulige løsninger for å legge til alternativer fra en inngangstekst til Select -taggen.

Konklusjon

For å legge til et alternativ fra en inngangstekst til en valgt tagg ved hjelp av JavaScript, kan du bruke JavaScript innebygde metoder, inkludert Add () -metode eller AppledChild () -metode. Du kan legge til alternativer i en valgt kode i begynnelsen av listen, så vel som slutten av listen. I denne opplæringen har vi definert prosedyren for å legge til et alternativ fra en inngangstekst til en valgt tagg ved hjelp av JavaScript med detaljerte eksempler.