See õpetus määratleb protseduuri sisendteksti valiku lisamiseks JavaScripti abil valitud märgendile.
Kuidas lisada JavaScripti abil sisendtekstist sildi valimise võimalus?
Sisestatud tekstist valiku lisamiseks valitud märgendile JavaScripti abil saate kasutada erinevaid meetodeid, näiteks:
Uurime iga meetodit ükshaaval!
1. meetod: lisage sisendtekstist sildi valimise võimalus, kasutades meetodit add() koos suvandikonstruktoriga
Valitud märgendile sisendtekstist suvandi lisamiseks kasutage ' lisama() ' meetod koos ' Võimalus ” Konstruktor. Meetodit add() kasutatakse elementide lisamiseks valiku ' HTMLSelectElement ” tuntud ka kui
Süntaks
Järgige lisatud süntaksit, et kasutada meetodit add() suvandi lisamiseks valitud märgendisse:
lisama ( valik, olemasolevOption ) ;Siin on ' valik ' tähistab uut valikut, mis lisatakse '' asemele olemasolev võimalus ”.
Näide
Loome sisestusvälja, rippmenüü kasutades
< vali id = 'valikud' >
< optsiooni väärtus = 'c' > C valik >
vali >
< br >< br >
< nupu id = 'lisa btn' onclick = 'insertOption()' > Lisa valik nuppu >
Määrake JS-failis funktsioon nimega ' insertOption() ja seejärel pääsete juurde nupule, tekstiväljale ja valitud elemendile koos neile määratud ID-ga, kasutades nuppu ' querySelector() ” meetod. Seejärel looge suvandi eksemplar, kasutades Option konstruktorit, ja kutsuge meetod add() välja, edastades olemasoleva valiku ja uue valiku, mis tuleb loendi lõppu lisada:
functioninsertOption ( ){
konst addBtn = dokument. querySelector ( '#addbtn' ) ;
konst listbox = dokument. querySelector ( '#valikud' ) ;
konst rippmenüüst = dokument. querySelector ( '#txt' ) ;
konst valik = uus Võimalus ( rippmenüüst. väärtus , rippmenüüst. väärtus ) ;
listbox. lisama ( valik, määramata ) ;
rippmenüüst. väärtus = '' ;
rippmenüüst. keskenduda ( ) ;
}
Väljund näitab, et uus valik tekstiväljalt lisatakse rippmenüü lõppu:
Märge: Selle meetodi abil saate lisada valiku märgendi algusesse, lisades olemasoleva valiku väärtuse määramata parameetri asemel teise parameetrina. See lisab uue valiku enne olemasolevat.
Liigume teise meetodi juurde!
2. meetod: lisage valik sisendtekstist sildi valimiseks, kasutades createElement() meetodit appendChild()
On veel üks lähenemisviis, mille abil saate luua uue elemendi, kasutades ' looElement() ' meetod koos ' appendChild() ” meetod. Seda metoodikat kasutades lisame valiku märgendi algusesse.
Süntaks
Kasutage järgmist süntaksit, et lisada valik märgendisse sisendtekstist, kasutades meetodit appendChild().
lisalaps ( newOptionValue ) ;Näide
Siin loome rippmenüü, lisades kaks võimalust ' C ” ja „ C++ ”, sisestusväli ja nupp, mis kutsub esile kasutaja määratud JavaScripti funktsiooni nimega “ insertOption() ', kui selle onclick sündmus käivitatakse:
< sisendi tüüp = 'tekst' id = 'txt' kohatäide = 'Suvandi lisamiseks sisestage tekst' >< vali id = 'rippmenüü' >
< valik > C valik >
< valik > C ++ valik >
vali >
< br >< br >
< nupp onclick = 'insertOption();' > Lisa valik nuppu >
Funktsioonis nimega ' insertOption() ”, pääsete esmalt juurde valitud elemendile ja tekstiväljale, kasutades neile määratud ID-sid, ning seejärel kutsuge suvandieksemplari loomiseks välja meetodid createElement() ja createTextNode() ning toovad tekstiväärtuse valikuna. Pärast seda kutsuge meetod appendChild() ja edastage teksti väärtus valikuna, seejärel lisage see valik loendi algusesse, kasutades ' insertBefore() ” meetod koos valitud elemendiga:
functioninsertOption ( ){
var valida = dokument. getElementById ( 'rippmenüü' ) ,
textValue = dokument. getElementById ( 'txt' ) . väärtus ,
uus võimalus = dokument. looElement ( 'Valik' ) ,
newOptionValue = dokument. CreateTextNode ( textValue ) ;
uus võimalus. lisalaps ( newOptionValue ) ;
vali. sisestage enne ( uusValik, valige. esimene Laps ) ;
}
Nagu näete, näitab väljund, et uus valik tekstiväljalt lisatakse rippmenüü algusesse:
Oleme koostanud kõik võimalikud lahendused valikute lisamiseks sisendtekstist valikusildile.
Järeldus
Sisestatud tekstist valiku lisamiseks valitud märgendile JavaScripti abil saate kasutada JavaScripti sisseehitatud meetodeid, sealhulgas meetodit add() või appendChild() meetodit. Saate lisada valikuid nii loendi alguses kui ka loendi lõpus olevale valikusildile. Selles õpetuses oleme üksikasjalike näidetega määratlenud protseduuri sisendteksti valiku lisamiseks valitud märgendile JavaScripti abil.