Ez az oktatóanyag meghatározza azt az eljárást, amellyel a bemeneti szövegből egy opciót adhatunk hozzá a JavaScript segítségével kiválasztott címkéhez.
Hogyan adhatunk hozzá lehetőséget a címke kiválasztására a bemeneti szövegből JavaScript használatával?
Ha egy bemeneti szövegből szeretne opciót hozzáadni egy kiválasztott címkéhez JavaScript használatával, különböző módszereket használhat, például:
Vizsgáljuk meg az egyes módszereket egyenként!
1. módszer: Adjon hozzá lehetőséget a címke kiválasztásához a beviteli szövegből az add() metódus használatával az Option Constructor segítségével
Ha a beviteli szövegből szeretne opciót hozzáadni egy kiválasztott címkéhez, használja a „ add() ' módszer a ' választási lehetőség ” Konstruktor. Az add() metódus az elemek hozzáadására szolgál a „ HTMLSelectElement ” más néven
Szintaxis
Kövesse a megadott szintaxist, ha az add() metódussal szeretne hozzáadni egy opciót egy Select címkéhez:
add hozzá ( opció, meglévő Opció ) ;Itt a „ választási lehetőség ' jelenti azt az új lehetőséget, amely a ' meglévő Opció ”.
Példa
A segítségével létrehozunk egy beviteli mezőt, egy legördülő menüt
< válassza ki az azonosítót = 'lehetőségek' >
< opció értéke = 'c' > C választási lehetőség >
válassza ki >
< br >< br >
< gomb id = 'btn hozzáadása' kattintásra = 'InsertOption()' > Opció hozzáadása gomb >
A JS fájlban definiáljon egy ' nevű függvényt insertOption() ', majd a ' querySelector() ” módszerrel. Ezután hozzon létre egy példányt az opcióból az Option konstruktor segítségével, és hívja meg az add() metódust a meglévő és a lista végéhez hozzáadandó új opció átadásával:
functioninsertOption ( ){
const addBtn = dokumentum. querySelector ( '#addbtn' ) ;
const listbox = dokumentum. querySelector ( '#lehetőségek' ) ;
const ledob = dokumentum. querySelector ( '#txt' ) ;
const választási lehetőség = új választási lehetőség ( ledob. érték , ledob. érték ) ;
listbox. add hozzá ( opció, undefined ) ;
ledob. érték = '' ;
ledob. fókusz ( ) ;
}
A kimenet azt mutatja, hogy a szövegmező új opciója a legördülő menü végére kerül hozzáadásra:
Jegyzet: Ezzel a módszerrel hozzáadhatja az opciót a select címke elejéhez úgy, hogy a meglévő beállítás értékét adja hozzá második paraméterként az undefined helyett. Az új opciót hozzáadja a meglévőhöz.
Térjünk át a másik módszerre!
2. módszer: Adjon hozzá lehetőséget a címke kiválasztásához a beviteli szövegből a createElement() használatával az appendChild() metódussal
Van egy másik megközelítés, amellyel új elemet hozhat létre a „ createElement() ' módszer a ' appendChild() ” módszerrel. Ezzel a módszertannal hozzáadjuk a beállításokat a select címke elejéhez.
Szintaxis
Használja a következő szintaxist az appendChild() metódussal a beviteli szöveg kiválasztási címkéjéhez való hozzáadáshoz:
appendChild ( newOptionValue ) ;Példa
Itt létrehozunk egy legördülő listát két lehetőség hozzáadásával ' C ” és „ C++ ”, egy beviteli mező és egy gomb, amely meghívja a felhasználó által definiált JavaScript függvényt insertOption() ', amikor az onclick esemény elindul:
< bemeneti típus = 'szöveg' id = 'txt' helykitöltő = 'Írja be a szöveget a lehetőség hozzáadásához' >< válassza ki az azonosítót = 'ledob' >
< választási lehetőség > C választási lehetőség >
< választási lehetőség > C ++ választási lehetőség >
válassza ki >
< br >< br >
< gomb onclick = 'InsertOption();' > Opció hozzáadása gomb >
A „nevű függvényben insertOption() ”, először nyissa meg a kijelölő elemet és a szövegmezőt a hozzájuk rendelt azonosítókkal, majd hívja meg a createElement() és createTextNode() metódusokat egy opciópéldány létrehozásához, és kérje le a szövegértéket opcióként. Ezután hívja meg az appendChild() metódust, és adja át a szöveges értéket opcióként, majd adja hozzá ezt az opciót a kiválasztási lista elejéhez a ' insertBefore() ” módszer kijelölő elemmel:
functioninsertOption ( ){
var select = dokumentum. getElementById ( 'ledob' ) ,
textValue = dokumentum. getElementById ( 'txt' ) . érték ,
új Opció = dokumentum. CreateElement ( 'Választási lehetőség' ) ,
newOptionValue = dokumentum. CreateTextNode ( textValue ) ;
új Opció. appendChild ( newOptionValue ) ;
válassza ki. insertBefore ( új Opció, válasszon. első gyerek ) ;
}
Amint láthatja, a kimenet azt mutatja, hogy a szövegmező új opciója a legördülő menü elején van hozzáadva:
Összegyűjtöttük az összes lehetséges megoldást a beviteli szövegtől a select tag-ig terjedő opciók hozzáadására.
Következtetés
Ha egy bemeneti szövegből egy beállítást szeretne hozzáadni egy kiválasztott címkéhez JavaScript használatával, használhatja a JavaScript beépített metódusait, beleértve az add() metódust vagy az appendChild() metódust. Hozzáadhat opciókat a lista elején és a végén található kiválasztási címkében. Ebben az oktatóanyagban részletes példákkal definiáltuk azt az eljárást, amellyel egy bemeneti szövegből egy opciót adhatunk hozzá egy JavaScript használatával.