Šajā apmācībā tiks definēta procedūra, lai atlasītajam tagam pievienotu opciju no ievades teksta, izmantojot JavaScript.
Kā pievienot iespēju atlasīt tagu no ievades teksta, izmantojot JavaScript?
Lai atlasītajam tagam pievienotu opciju no ievades teksta, izmantojot JavaScript, varat izmantot dažādas metodes, piemēram:
Izpētīsim katru metodi pa vienam!
1. metode: pievienojiet opciju, lai atlasītu tagu no ievades teksta, izmantojot metodi add() ar opciju konstruktoru
Lai atlasītajā tagā pievienotu opciju no ievades teksta, izmantojiet ' pievienot () ' metode ar ' Opcija ” Konstruktors. Metode add() tiek izmantota, lai pievienotu elementus opcijas “ HTMLSelectElement ” pazīstams arī kā
Sintakse
Izpildiet sniegto sintaksi, lai izmantotu metodi add() opciju pievienošanai atlasītajam tagam:
pievienot ( iespēja, esošāOpcija ) ;Šeit “ opciju ' apzīmē jauno opciju, kas tiks pievienota '' vietā esošāOpcija ”.
Piemērs
Mēs izveidosim ievades lauku, nolaižamo izvēlni, izmantojot
< atlasiet id = 'iespējas' >
< opcijas vērtība = 'c' > C opciju >
izvēlieties >
< br >< br >
< pogas id = 'pievienot btn' onclick = 'insertOption()' > Pievienot opciju pogu >
JS failā definējiet funkciju ar nosaukumu ' insertOption() un pēc tam piekļūstiet pogai, tekstlodziņam un atlases elementam ar tiem piešķirtajiem ID, izmantojot querySelector() ” metode. Pēc tam izveidojiet opcijas gadījumu, izmantojot opciju konstruktoru, un izsauciet metodi add(), nododot esošo opciju un jauno opciju, kas jāpievieno saraksta beigās:
functioninsertOption ( ){
konst addBtn = dokumentu. querySelector ( '#addbtn' ) ;
konst sarakstlodziņš = dokumentu. querySelector ( '#opcijas' ) ;
konst nomest lejā = dokumentu. querySelector ( '#txt' ) ;
konst opciju = jauns Opcija ( nomest lejā. vērtību , nomest lejā. vērtību ) ;
sarakstlodziņš. pievienot ( opcija, nenoteikta ) ;
nomest lejā. vērtību = '' ;
nomest lejā. fokuss ( ) ;
}
Izvade parāda, ka jaunā opcija no teksta lauka ir pievienota nolaižamās izvēlnes beigās:
Piezīme: Varat izmantot šo metodi, lai pievienotu opciju atlases taga sākumā, pievienojot esošās opcijas vērtību kā otro parametru, nevis nedefinētu. Tas pievienos jauno opciju pirms esošās.
Pārejam pie citas metodes!
2. metode: pievienojiet iespēju atlasīt tagu no ievades teksta, izmantojot createElement() ar appendChild() metodi
Ir arī cita pieeja, ar kuras palīdzību jūs varat izveidot jaunu elementu, izmantojot ' CreateElement() ' metode ar ' appendChild() ” metode. Izmantojot šo metodoloģiju, mēs pievienosim opcijas atlases taga sākumā.
Sintakse
Izmantojiet šādu sintaksi, lai pievienotu opciju atlasītajā tagā no ievades teksta, izmantojot appendChild() metodi:
pievienotBērns ( newOptionValue ) ;Piemērs
Šeit mēs izveidosim nolaižamo sarakstu, pievienojot divas iespējas ' C ' un ' C++ ”, ievades lauks un poga, kas izsauks lietotāja definēto JavaScript funkciju ar nosaukumu “ insertOption() ”, kad tiek aktivizēts notikums onclick:
< ievades veids = 'teksts' id = 'txt' vietturis = 'Ievadiet tekstu, lai pievienotu opciju' >< atlasiet id = 'nomest lejā' >
< opciju > C opciju >
< opciju > C ++ opciju >
izvēlieties >
< br >< br >
< pogu onclick = 'insertOption();' > Pievienot opciju pogu >
Funkcijā ar nosaukumu ' insertOption() ”, vispirms piekļūstiet atlases elementam un teksta laukam, izmantojot tiem piešķirtos ID, un pēc tam izsauciet metodes createElement() un createTextNode(), lai izveidotu opcijas gadījumu, un izgūt teksta vērtību kā opciju. Pēc tam izsauciet metodi appendChild() un nosūtiet teksta vērtību kā opciju, pēc tam pievienojiet šo opciju atlases saraksta sākumā, izmantojot “ insertBefore() ” metode ar atlases elementu:
functioninsertOption ( ){
var atlasīt = dokumentu. getElementById ( 'nomest lejā' ) ,
textValue = dokumentu. getElementById ( 'txt' ) . vērtību ,
jaunsOpcija = dokumentu. izveidotElement ( 'Opcija' ) ,
newOptionValue = dokumentu. CreateTextNode ( textValue ) ;
jaunsOpcija. pievienotBērns ( newOptionValue ) ;
izvēlieties. ievietot Pirms ( newOption, izvēlieties. pirmaisBērns ) ;
}
Kā redzat, izvade parāda, ka jaunā opcija no teksta lauka ir pievienota nolaižamās izvēlnes sākumā:
Mēs esam apkopojuši visus iespējamos risinājumus opciju pievienošanai no ievades teksta atlases tagam.
Secinājums
Lai atlasītajam tagam pievienotu opciju no ievades teksta, izmantojot JavaScript, varat izmantot JavaScript iebūvētās metodes, tostarp metodi add() vai appendChild() metodi. Varat pievienot opcijas atlases tagā gan saraksta sākumā, gan saraksta beigās. Šajā apmācībā esam definējuši procedūru, lai atlasītajam tagam pievienotu opciju no ievades teksta, izmantojot JavaScript ar detalizētiem piemēriem.