Tämä opetusohjelma määrittelee menettelyn, jolla syöttöteksti lisätään valittuun tunnisteeseen JavaScriptin avulla.
Kuinka lisätä vaihtoehto valita tunniste syöttötekstistä JavaScriptin avulla?
Voit lisätä vaihtoehdon syöttötekstistä valittuun tunnisteeseen JavaScriptin avulla käyttämällä erilaisia menetelmiä, kuten:
Tutkitaan jokaista menetelmää yksitellen!
Tapa 1: Lisää vaihtoehto valitaksesi tunniste syöttötekstistä käyttämällä add()-menetelmää Option Constructorilla
Jos haluat lisätä vaihtoehdon syöttötekstistä valittuun tunnisteeseen, käytä ' lisätä() ' menetelmä '' Vaihtoehto ”Rakentaja. Add()-menetelmää käytetään elementtien lisäämiseen ' HTMLSelectElement ” tunnetaan myös nimellä
Syntaksi
Noudata annettua syntaksia käyttääksesi add()-menetelmää valinnan lisäämiseen Select tagiin:
lisätä ( vaihtoehto, olemassa oleva vaihtoehto ) ;Täällä ' vaihtoehto ' edustaa uutta vaihtoehtoa, joka lisätään '' olemassa oleva vaihtoehto ”.
Esimerkki
Luomme syöttökentän, pudotusvalikon käyttämällä
< valitse tunnus = 'vaihtoehdot' >
< vaihtoehdon arvo = 'c' > C vaihtoehto >
valitse >
< br >< br >
< painikkeen tunnus = 'lisää btn' klikkaamalla = 'insertOption()' > Lisää vaihtoehto -painiketta >
Määritä JS-tiedostossa funktio nimeltä ' insertOption() ' ja käytä sitten painiketta, tekstiruutua ja valintaelementtiä niille määritetyillä tunnuksilla käyttämällä ' querySelector() ”menetelmä. Luo sitten vaihtoehdon esiintymä Optio-konstruktorilla ja kutsu add()-metodi ohittamalla olemassa oleva vaihtoehto ja uusi vaihtoehto, joka on lisättävä luettelon loppuun:
functioninsertOption ( ){
konst addBtn = asiakirja. querySelector ( '#addbtn' ) ;
konst listalaatikko = asiakirja. querySelector ( '#vaihtoehdot' ) ;
konst pudota alas = asiakirja. querySelector ( '#txt' ) ;
konst vaihtoehto = Uusi Vaihtoehto ( pudota alas. arvo , pudota alas. arvo ) ;
listalaatikko. lisätä ( vaihtoehto, määrittelemätön ) ;
pudota alas. arvo = '' ;
pudota alas. keskittyä ( ) ;
}
Tulos näyttää, että uusi vaihtoehto tekstikentästä on lisätty pudotusvalikon loppuun:
merkintä: Tällä menetelmällä voit lisätä vaihtoehdon Select tagin alkuun lisäämällä olemassa olevan vaihtoehdon arvon toiseksi parametriksi määrittelemättömän parametrin sijaan. Se lisää uuden vaihtoehdon nykyisen vaihtoehdon edelle.
Siirrytään toiseen tapaan!
Tapa 2: Lisää vaihtoehto valitaksesi tunniste syöttötekstistä käyttämällä createElement()-menetelmää appendChild()-menetelmällä
On olemassa toinen tapa, jolla voit luoda uuden elementin käyttämällä ' createElement() ' menetelmällä ' appendChild() ”menetelmä. Käyttämällä tätä menetelmää lisäämme valinnat Select tagin alkuun.
Syntaksi
Käytä seuraavaa syntaksia lisättäessäsi vaihtoehto Select tagiin syöttötekstistä käyttämällä appendChild() -menetelmää:
liitä lapsi ( newOptionValue ) ;Esimerkki
Täällä luomme avattavan luettelon lisäämällä kaksi vaihtoehtoa ' C ' ja ' C++ , syöttökenttä ja painike, joka kutsuu käyttäjän määrittämää JavaScript-funktiota nimeltä ' insertOption() ', kun sen onclick-tapahtuma käynnistyy:
< syötteen tyyppi = 'teksti' id = 'txt' paikanpitäjä = 'Syötä teksti lisätäksesi vaihtoehto' >< valitse tunnus = 'pudota alas' >
< vaihtoehto > C vaihtoehto >
< vaihtoehto > C ++ vaihtoehto >
valitse >
< br >< br >
< painiketta onclick = 'insertOption();' > Lisää vaihtoehto -painiketta >
Toiminnossa nimeltä ' insertOption() ”, käytä ensin Select-elementtiä ja tekstikenttää niille määritetyillä tunnuksilla ja kutsu sitten createElement()- ja createTextNode()-menetelmiä vaihtoehtoinstanssin luomiseksi ja nouta tekstiarvo vaihtoehtona. Kutsu sen jälkeen appendChild() -metodi ja välitä tekstiarvo vaihtoehtona ja lisää tämä vaihtoehto valintaluettelon alkuun käyttämällä ' insertBefore() ” menetelmä Select elementillä:
functioninsertOption ( ){
var select = asiakirja. getElementById ( 'pudota alas' ) ,
textValue = asiakirja. getElementById ( 'txt' ) . arvo ,
uusi vaihtoehto = asiakirja. CreateElement ( 'Vaihtoehto' ) ,
newOptionValue = asiakirja. CreateTextNode ( textValue ) ;
uusi vaihtoehto. liitä lapsi ( newOptionValue ) ;
valitse. insertEnnen ( uusi vaihtoehto, valitse. ensimmäinen lapsi ) ;
}
Kuten näet, tulos näyttää, että uusi vaihtoehto tekstikentästä lisätään avattavan valikon alkuun:
Olemme koonneet kaikki mahdolliset ratkaisut vaihtoehtojen lisäämiseksi syöttötekstistä Select tagiin.
Johtopäätös
Jos haluat lisätä vaihtoehdon syöttötekstistä valittuun tunnisteeseen JavaScriptin avulla, voit käyttää JavaScriptin sisäisiä menetelmiä, kuten add()- tai appendChild()-menetelmää. Voit lisätä vaihtoehtoja valintatunnisteeseen luettelon alkuun ja loppuun. Tässä opetusohjelmassa olemme määrittäneet menettelyn, jolla lisätään vaihtoehto syöttötekstistä valittuun tunnisteeseen käyttämällä JavaScriptiä yksityiskohtaisten esimerkkien kanssa.