Šioje mokymo programoje bus aprašyta procedūra, kaip pridėti parinktį iš įvesties teksto prie pasirinktos žymos naudojant „JavaScript“.
Kaip pridėti parinktį pasirinkti žymą iš įvesties teksto naudojant „JavaScript“?
Norėdami pridėti parinktį iš įvesties teksto prie pasirinktos žymos naudodami „JavaScript“, galite naudoti skirtingus metodus, pvz.:
Išnagrinėkime kiekvieną metodą po vieną!
1 būdas: pridėkite parinktį pasirinkti žymą iš įvesties teksto naudodami metodą add() su parinkčių konstruktoriumi
Norėdami pridėti parinktį iš įvesties teksto pasirinktoje žymoje, naudokite „ papildyti() “ metodas su “ Parinktis “ Konstruktorius. „Add()“ metodas naudojamas elementams pridėti prie „ HTMLSelectElement “ taip pat žinomas kaip
Sintaksė
Norėdami pridėti parinktį pasirinktoje žymoje, vadovaukitės pateikta sintaksė:
papildyti ( variantas, esamasOption ) ;Čia „ variantas “ reiškia naują parinktį, kuri bus pridėta vietoje „ esama parinktis “.
Pavyzdys
Naudodami sukursime įvesties lauką, išskleidžiamąjį meniu
< pasirinkite id = 'galimybės' >
< opciono vertė = 'c' > C variantas >
pasirinkite >
< br >< br >
< mygtuko ID = 'Pridėti btn' paspaudus = 'insertOption()' > Pridėti parinktį mygtuką >
JS faile apibrėžkite funkciją pavadinimu ' ĮterptiOption() “, tada pasiekite mygtuką, teksto laukelį ir pasirinkimo elementą su jiems priskirtais ID naudodami „ querySelector() “ metodas. Tada sukurkite parinkties egzempliorių naudodami parinkčių konstruktorių ir iškvieskite metodą add() perduodant esamą parinktį ir naują parinktį, kurią reikia pridėti sąrašo pabaigoje:
functioninsertOption ( ){
konst addBtn = dokumentas. querySelector ( „#addbtn“ ) ;
konst sąrašo laukelis = dokumentas. querySelector ( '#galimybės' ) ;
konst išskleidžiamąjį meniu = dokumentas. querySelector ( '#txt' ) ;
konst variantas = naujas Parinktis ( išskleidžiamąjį meniu. vertė , išskleidžiamasis meniu. vertė ) ;
sąrašo laukelis. papildyti ( variantas, neapibrėžtas ) ;
išskleidžiamąjį meniu. vertė = '' ;
išskleidžiamąjį meniu. sutelkti dėmesį ( ) ;
}
Išvestis rodo, kad nauja parinktis iš teksto lauko pridedama išskleidžiamojo meniu pabaigoje:
Pastaba: Šį metodą galite naudoti norėdami pridėti parinktį pasirinkimo žymos pradžioje, pridėdami esamos parinkties vertę kaip antrą parametrą, o ne neapibrėžtą. Nauja parinktis bus pridėta prieš esamą.
Pereikime prie kito metodo!
2 būdas: pridėkite parinktį pasirinkti žymą iš įvesties teksto naudodami createElement() su appendChild() metodu
Yra ir kitas būdas, kuriuo galite sukurti naują elementą naudodami „ sukurti elementą () “ metodas su „ appendChild() “ metodas. Naudodami šią metodiką pasirinkimo žymos pradžioje pridėsime parinktis.
Sintaksė
Naudokite šią sintaksę, kad pridėtumėte parinktį pasirinkimo žymoje iš įvesties teksto naudodami appendChild() metodą:
pridėti Vaikas ( newOptionValue ) ;Pavyzdys
Čia mes sukursime išskleidžiamąjį sąrašą pridėdami dvi parinktis ' C “ ir „ C++ “, įvesties laukas ir mygtukas, kuris iškvies vartotojo apibrėžtą „JavaScript“ funkciją pavadinimu „ ĮterptiOption() “, kai suaktyvinamas įvykis onclick:
< įvesties tipas = 'tekstas' id = 'txt' vietos rezervuaras = „Įveskite tekstą, kad pridėtumėte parinktį“ >< pasirinkite id = 'išskleidžiamasis sąrašas' >
< variantas > C variantas >
< variantas > C ++ variantas >
pasirinkite >
< br >< br >
< mygtukas onclick = 'įterptiOption();' > Pridėti parinktį mygtuką >
Funkcijoje pavadinimu „ ĮterptiOption() “, pirmiausia pasiekite pasirinktą elementą ir teksto lauką naudodami jiems priskirtus ID, tada iškvieskite createElement() ir createTextNode() metodus, kad sukurtumėte parinkties egzempliorių ir gautumėte teksto reikšmę kaip parinktį. Po to iškvieskite appendChild() metodą ir perduokite teksto reikšmę kaip parinktį, tada pridėkite šią parinktį pasirinkimo sąrašo pradžioje naudodami „ insertBefore () “ metodas su pasirinkimo elementu:
functioninsertOption ( ){
var pasirinkti = dokumentas. getElementById ( 'išskleidžiamasis sąrašas' ) ,
textValue = dokumentas. getElementById ( 'txt' ) . vertė ,
naujas variantas = dokumentas. sukurtiElementą ( 'Variantas' ) ,
newOptionValue = dokumentas. CreateTextNode ( textValue ) ;
naujas variantas. pridėti Vaikas ( newOptionValue ) ;
pasirinkite. įterptiPrieš ( naujasParinktis, pasirinkite. pirmas vaikas ) ;
}
Kaip matote, išvestis rodo, kad nauja parinktis iš teksto lauko pridedama išskleidžiamojo meniu pradžioje:
Surinkome visus galimus sprendimus, kaip įtraukti parinktis nuo įvesties teksto prie pasirinkimo žymos.
Išvada
Norėdami pridėti parinktį iš įvesties teksto prie pasirinktos žymos naudodami „JavaScript“, galite naudoti įtaisytuosius „JavaScript“ metodus, įskaitant metodą „add()“ arba „appendChild()“. Galite įtraukti parinktis pasirinktoje žymoje sąrašo pradžioje ir sąrašo pabaigoje. Šiame vadove apibrėžėme procedūrą, kaip įtraukti parinktį iš įvesties teksto į pasirinktą žymą naudodami „JavaScript“ su išsamiais pavyzdžiais.