Ta vadnica bo definirala postopek za dodajanje možnosti iz vhodnega besedila v oznako za izbiro z uporabo JavaScripta.
Kako dodati možnost za izbiro oznake iz vhodnega besedila z uporabo JavaScripta?
Če želite dodati možnost iz vnosnega besedila v oznako za izbiro s pomočjo JavaScripta, lahko uporabite različne metode, kot so:
Raziščimo vsako metodo eno za drugo!
1. način: dodajte možnost za izbiro oznake iz vhodnega besedila z uporabo metode add() s konstruktorjem možnosti
Za dodajanje možnosti iz vnosnega besedila v oznaki za izbiro uporabite » dodaj() ' metoda z ' Možnost ” Konstruktor. Metoda add() se uporablja za dodajanje elementov v možnosti » HTMLSelectElement ” znan tudi kot oznaka
Sintaksa
Za uporabo metode add() za dodajanje možnosti v izbrani oznaki sledite navedeni sintaksi:
dodati ( možnost, obstoječa možnost ) ;Tukaj je ' možnost « predstavlja novo možnost, ki bo dodana namesto » obstoječa možnost ”.
Primer
Ustvarili bomo vnosno polje, spustni meni z uporabo
< izberite id = 'opcije' >
< vrednost opcije = 'c' > C možnost >
izberite >
< št >< št >
< ID gumba = 'dodaj btn' onclick = 'insertOption()' > Dodaj možnost gumb >
V datoteki JS definirajte funkcijo z imenom ' vstaviMožnost() « in nato s pomočjo » querySelector() ” metoda. Nato ustvarite primerek možnosti z uporabo konstruktorja možnosti in pokličite metodo add(), tako da posredujete obstoječo možnost in novo možnost, ki jo je treba dodati na koncu seznama:
functioninsertOption ( ){
konst addBtn = dokument. querySelector ( '#addbtn' ) ;
konst seznamsko polje = dokument. querySelector ( '#opcije' ) ;
konst spustni meni = dokument. querySelector ( '#txt' ) ;
konst možnost = novo Možnost ( spustni meni. vrednost , spustni meni. vrednost ) ;
seznamsko polje. dodati ( možnost, nedefinirano ) ;
spustni meni. vrednost = '' ;
spustni meni. fokus ( ) ;
}
Izhod kaže, da je nova možnost iz besedilnega polja dodana na koncu spustnega menija:
Opomba: To metodo lahko uporabite za dodajanje možnosti na začetek oznake za izbiro, tako da vrednost obstoječe možnosti dodate kot drugi parameter namesto nedefiniranega. Dodal bo novo možnost pred obstoječo.
Preidimo na drugo metodo!
2. način: dodajte možnost za izbiro oznake iz vhodnega besedila z uporabo createElement() z metodo appendChild().
Obstaja še en pristop, s katerim lahko ustvarite nov element z uporabo ' createElement() ' metoda z ' appendChild() ” metoda. Z uporabo te metodologije bomo dodali možnosti na začetek oznake za izbiro.
Sintaksa
Uporabite naslednjo sintakso za dodajanje možnosti v oznaki za izbiro iz vhodnega besedila z uporabo metode appendChild():
appendChild ( newOptionValue ) ;Primer
Tukaj bomo ustvarili spustni seznam z dodajanjem dveh možnosti ' C « in » C++ «, polje za vnos in gumb, ki bo poklical uporabniško definirano funkcijo JavaScript z imenom » vstaviMožnost() «, ko se sproži njegov dogodek onclick:
< vrsta vnosa = 'besedilo' id = 'txt' rezervirano mesto = 'Vnesite besedilo za dodajanje možnosti' >< izberite id = 'spustni meni' >
< možnost > C možnost >
< možnost > C ++ možnost >
izberite >
< št >< št >
< gumb na klik = 'insertOption();' > Dodaj možnost gumb >
V funkciji z imenom ' vstaviMožnost() «, najprej dostopajte do izbranega elementa in besedilnega polja z uporabo njihovih dodeljenih ID-jev, nato pa pokličite metodi createElement() in createTextNode() za ustvarjanje primerka možnosti in pridobite besedilno vrednost kot možnost. Po tem pokličite metodo appendChild() in posredujte besedilno vrednost kot možnost, nato dodajte to možnost na začetek izbirnega seznama z uporabo ' vstavipred() ” z izbranim elementom:
functioninsertOption ( ){
var select = dokument. getElementById ( 'spustni meni' ) ,
textValue = dokument. getElementById ( 'txt' ) . vrednost ,
novaMožnost = dokument. createElement ( 'Možnost' ) ,
newOptionValue = dokument. createTextNode ( textValue ) ;
novaMožnost. appendChild ( newOptionValue ) ;
izberite. vstaviPred ( nova možnost, izberite. firstChild ) ;
}
Kot lahko vidite, izhod kaže, da je nova možnost iz besedilnega polja dodana na začetku spustnega menija:
Zbrali smo vse možne rešitve za dodajanje možnosti iz vnosnega besedila v oznako za izbiro.
Zaključek
Če želite dodati možnost iz vhodnega besedila v oznako za izbiro z uporabo JavaScripta, lahko uporabite vgrajene metode JavaScript, vključno z metodo add() ali metodo appendChild(). Možnosti lahko dodate v oznaki za izbiro na začetku seznama in tudi na koncu seznama. V tej vadnici smo definirali postopek za dodajanje možnosti iz vhodnega besedila v oznako za izbiro z uporabo JavaScripta s podrobnimi primeri.