Ovaj vodič će definirati postupak za dodavanje opcije iz teksta unosa u oznaku za odabir pomoću JavaScripta.
Kako dodati opciju odabira oznake iz unesenog teksta pomoću JavaScripta?
Za dodavanje opcije iz teksta unosa u oznaku odabira pomoću JavaScripta, možete koristiti različite metode, kao što su:
Istražimo svaku metodu jednu po jednu!
Metoda 1: Dodavanje opcije za odabir oznake iz ulaznog teksta pomoću metode add() s konstruktorom opcija
Za dodavanje opcije iz teksta unosa u oznaku za odabir, koristite ' dodati() ' metoda s ' Opcija ” Konstruktor. Metoda add() koristi se za dodavanje elemenata opcijama ' HTMLSelectElement ” poznat i kao oznaka
Sintaksa
Slijedite priloženu sintaksu za korištenje metode add() za dodavanje opcije u oznaku za odabir:
dodati ( opcija, postojeća opcija ) ;Ovdje, ' opcija ' predstavlja novu opciju koja će biti dodana umjesto ' postojećeOpcija ”.
Primjer
Napravit ćemo polje za unos, padajući izbornik pomoću
< odaberite id = 'opcije' >
< vrijednost opcije = 'c' > C opcija >
Odaberi >
< br >< br >
< id gumba = 'dodaj btn' na klik = 'umetniOpcija()' > Dodaj opciju dugme >
U JS datoteci definirajte funkciju pod nazivom ' umetniOpcija() ', a zatim pristupite gumbu, tekstualnom okviru i elementu za odabir s njihovim dodijeljenim ID-om koristeći ' querySelector() ” metoda. Zatim stvorite instancu opcije pomoću konstruktora Option i pozovite metodu add() prosljeđivanjem postojeće opcije i nove opcije koju je potrebno dodati na kraj popisa:
functioninsertOption ( ){
konst addBtn = dokument. querySelector ( '#addbtn' ) ;
konst popisni okvir = dokument. querySelector ( '#opcije' ) ;
konst padajući izbornik = dokument. querySelector ( '#txt' ) ;
konst opcija = novi Opcija ( padajući izbornik. vrijednost , padajući izbornik. vrijednost ) ;
popisni okvir. dodati ( opcija, nedefinirana ) ;
padajući izbornik. vrijednost = '' ;
padajući izbornik. usredotočenost ( ) ;
}
Ispis pokazuje da je nova opcija iz tekstualnog polja dodana na kraj padajućeg izbornika:
Bilješka: Ovu metodu možete koristiti za dodavanje opcije na početku oznake odabira dodavanjem vrijednosti postojeće opcije kao drugog parametra umjesto nedefiniranog. Dodat će novu opciju prije postojeće.
Prijeđimo na drugu metodu!
Metoda 2: Dodavanje opcije za odabir oznake iz ulaznog teksta pomoću createElement() s metodom appendChild()
Postoji još jedan pristup pomoću kojeg možete stvoriti novi element koristeći ' stvoritiElement() ' metoda s ' dodatiDijete() ” metoda. Koristeći ovu metodologiju, dodat ćemo opcije na početku oznake za odabir.
Sintaksa
Upotrijebite sljedeću sintaksu za dodavanje opcije u oznaku odabira iz ulaznog teksta pomoću metode appendChild():
dodatiDijete ( newOptionValue ) ;Primjer
Ovdje ćemo stvoriti padajući popis dodavanjem dvije opcije ' C ' i ' C++ ', polje za unos i gumb koji će pozvati korisnički definiranu JavaScript funkciju pod nazivom ' umetniOpcija() ” kada se pokrene njegov onclick događaj:
< vrsta unosa = 'tekst' iskaznica = 'txt' rezerviranog mjesta = 'Unesite tekst za dodavanje opcije' >< odaberite id = 'padajući' >
< opcija > C opcija >
< opcija > C ++ opcija >
Odaberi >
< br >< br >
< gumb na klik = 'umetniOpcija();' > Dodaj opciju dugme >
U funkciji pod nazivom ' umetniOpcija() “, prvo pristupite elementu odabira i tekstualnom polju pomoću njihovih dodijeljenih ID-ova, a zatim pozovite metode createElement() i createTextNode() za stvaranje instance opcije i dohvatite tekstualnu vrijednost kao opciju. Nakon toga, pozovite metodu appendChild() i proslijedite tekstualnu vrijednost kao opciju, a zatim dodajte ovu opciju na početak popisa odabira koristeći ' umetni prije() ” metoda s odabranim elementom:
functioninsertOption ( ){
var odabir = dokument. getElementById ( 'padajući' ) ,
textValue = dokument. getElementById ( 'txt' ) . vrijednost ,
novaOpcija = dokument. createElement ( 'Opcija' ) ,
newOptionValue = dokument. createTextNode ( textValue ) ;
novaOpcija. dodatiDijete ( newOptionValue ) ;
Odaberi. umetni prije ( novaOpcija, odaberite. prvoDijete ) ;
}
Kao što možete vidjeti da izlaz pokazuje da je nova opcija iz tekstualnog polja dodana na početku padajućeg izbornika:
Sakupili smo sva moguća rješenja za dodavanje opcija iz teksta unosa u oznaku za odabir.
Zaključak
Da biste dodali opciju iz ulaznog teksta u oznaku odabira pomoću JavaScripta, možete koristiti ugrađene metode JavaScripta, uključujući metodu add() ili metodu appendChild(). Možete dodati opcije u oznaku odabira na početku popisa kao i na kraju popisa. U ovom smo vodiču definirali proceduru za dodavanje opcije iz teksta unosa u oznaku za odabir pomoću JavaScripta s detaljnim primjerima.