Hvordan legge til alternativer å velge med JavaScript

I JavaScript møter vi vanligvis en utfordring der vi må ta med en kompleks liste der vi ønsker å legge til eller redigere et alternativ i tilfelle oppdateringer eller endringer i kriteriene. Å ha mange alternativer og mangel på håndtering av kategoriene kan dessuten forårsake problemer i manuelle scenarier. I disse scenariene kan de medfølgende JavaScript -metodene for å legge til nye alternativer redde deg.

Denne oppskrivningen vil guide om å legge til alternativer for å velge med JavaScript.

Hvordan legge til/sette inn alternativer for å velge med JavaScript?

Vi kan legge til alternativer å velge med JavaScript ved å bruke tre enkle metoder:

• “dokument.CreateElement ()”Metode
• “JQuery”Bibliotek
• “Alternativ()”Konstruktør

Vi vil nå gå gjennom hver av de nevnte tilnærmingene en etter en!

Metode 1: Legg til alternativer for å velge med JavaScript ved å bruke dokument.CreateElement () -metode

“dokument.CreateElement ()”Metode skaper en elementnode. Du kan også bruke denne metoden for å opprette et tilleggsalternativ i den eksisterende opsjonslisten. Denne funksjonaliteten vil oppnås ved å inkludere en knapp som vil legge til det spesifiserte alternativet til listen når du klikker.

For å legge til alternativer å velge med JavaScript ved hjelp av dokument.CreateElement () Metode, du må følge syntaksen under gitt under.

Syntaks

dokument.CreateElement (type)

Her, “type”Refererer til den typen element som må opprettes.

Se på følgende eksempel for forståelse av det uttalte konseptet.

Eksempel
I eksemplet nedenfor vil vi tilordne en spesifikk ID, “addoptions”Og størrelsen“3”, Som refererer til beholderstørrelsen der tre alternativer er plassert. Nå vil vi tilordne verdiene til alternativene som heter “Python”Og“Java”. Etter det, legg til en knapp med en “ved trykk" begivenhet. Det vil fungere på en slik måte at når knappen trykkes, funksjonen "AddOptions ()”Vil bli utløst:

Python
Java

Legg til nytt alternativ

I neste trinn vil vi definere funksjonen “AddOptions ()”Og få tilgang til den spesifiserte IDen til SELECT ved hjelp av“dokument.getElementById ()”Metode. Etter det vil vi lage en “alternativ”Element for å legge til en ny verdi i opsjonslisten.

Til slutt vil vi tildele en verdi “JavaScript”Til det spesifikke alternativet og legg det til i alternativlisten ved å bruke“Legg til()”Metode:

Utgangen fra implementeringen ovenfor vil resultere som følger:

Metode 2: Legg til alternativer for å velge med JavaScript ved hjelp av jQuery

“JQuery”Er et essensielt JavaScript -bibliotek som gjør JavaScript -programmering enklere. Du kan bruke dens “vedlegg ()”Metode for å legge til et alternativ og tilordne en spesifikk verdi til det aktuelle alternativet.

La oss gå gjennom følgende eksempel for demonstrasjon.

Eksempel
I den samme HTML -filen vil vi nå inkludere et jQuery -bibliotek i HTML “" stikkord:

Deretter vil vi bruke funksjonalitetene for å legge til et alternativ i opsjonslisten i en funksjon som heter “AddOptions ()”. Her får vi tilgang til IDen til å velge "#addoptions”, Legg til et nytt alternativ ved å bruke“vedlegg ()”Metode ved hjelp av“val ()”Og“tekst()”Metoder:

Den resulterende utgangen vil være:

Metode 3: Legg til alternativer for å velge med JavaScript ved å bruke alternativ () konstruktør

“Alternativ()”Konstruktør lager en ny”HtmloptionElement”. Det kan brukes til å legge til et nytt spor for et ekstra alternativ som heter “JavaScript”.

For å legge til alternativer å velge med JavaScript ved hjelp av alternativet () konstruktørmetoden, må du følge den undergitte syntaksen under.

Syntaks

Nytt alternativ (tekst, verdi)

Her, “tekst”Representerer elementets innhold, og“verdi”Refererer til verdien av htmloptionElement

Eksempel
Vi vil nå bruke "AddOptions ()”Funksjon for å få valgt ID ved hjelp av“dokument.getElementById ()”Metode. Deretter, ring "Alternativ()”Konstruktør og plasser alternativverdien”JavaScript" i det. Etter det, “vedlegg ()”Metode vil legge til den spesifiserte alternativverdien til slutten av listen:

Produksjon

Vi har gitt enkleste metoder for å legge til alternativer å velge med JavaScript.

Konklusjon

For å legge til alternativer å velge med JavaScript, kan du bruke "dokument.CreateElement ()”Metode for å lage et alternativelement og inkludere den spesifiserte alternativverdien i den eller“JQuery”Bibliotek eller“Alternativ()”Konstruktørmetode for å legge til et nytt spor for et ekstra alternativ og legge til verdien i opsjonslisten. Denne artikkelen ledet deg om å legge til alternativer for å velge med JavaScript.