Tento tutoriál bude definovať postup pridania možnosti zo vstupného textu do označenia výberu pomocou JavaScriptu.
Ako pridať možnosť výberu značky zo vstupného textu pomocou JavaScriptu?
Ak chcete pridať možnosť zo vstupného textu do označenia výberu pomocou JavaScriptu, môžete použiť rôzne metódy, ako napríklad:
Poďme preskúmať každú metódu jednu po druhej!
Metóda 1: Pridať možnosť na výber značky zo vstupného textu pomocou metódy add() s konštruktorom možností
Ak chcete pridať možnosť zo vstupného textu do značky výberu, použite „ pridať () “ metóda s “ Možnosť 'Konštruktér.' Metóda add() sa používa na pridanie prvkov do možností „ HTMLSelectElement ” tiež známy ako značka
Syntax
Ak chcete použiť metódu add() na pridanie voľby do značky select, postupujte podľa poskytnutej syntaxe:
pridať ( možnosť, existujúca možnosť ) ;Tu je „ možnosť “ predstavuje novú možnosť, ktorá bude pridaná namiesto „ existujúcaMožnosť “.
Príklad
Vytvoríme vstupné pole, rozbaľovacie menu pomocou
< vybrať id = 'možnosti' >
< hodnotu opcie = 'c' > C možnosť >
vyberte >
< br < br >
< ID tlačidla = 'pridať btn' po kliknutí = 'insertOption()' > Pridať možnosť tlačidlo >
V súbore JS definujte funkciu s názvom „ insertOption() “ a potom pomocou tlačidla „ querySelector() “. Potom vytvorte inštanciu možnosti pomocou konštruktora Option a zavolajte metódu add() odovzdaním existujúcej možnosti a novej možnosti, ktorú je potrebné pridať na koniec zoznamu:
functioninsertOption ( ){
konšt addBtn = dokument. querySelector ( '#addbtn' ) ;
konšt zoznam = dokument. querySelector ( '#možnosti' ) ;
konšt rozbaľovacia ponuka = dokument. querySelector ( '#TXT' ) ;
konšt možnosť = Nový Možnosť ( rozbaľovacia ponuka. hodnotu , rozbaľovacia ponuka. hodnotu ) ;
zoznam. pridať ( možnosť, nedefinované ) ;
rozbaľovacia ponuka. hodnotu = '' ;
rozbaľovacia ponuka. zameranie ( ) ;
}
Výstup ukazuje, že nová možnosť z textového poľa sa pridá na koniec rozbaľovacej ponuky:
Poznámka: Túto metódu môžete použiť na pridanie voľby na začiatok značky select pridaním hodnoty existujúcej voľby ako druhého parametra namiesto nedefinovaného. Pridá novú možnosť pred existujúcu.
Prejdime na inú metódu!
Metóda 2: Pridajte možnosť na výber značky zo vstupného textu pomocou metódy createElement() s metódou appendChild()
Existuje ďalší prístup, pomocou ktorého môžete vytvoriť nový prvok pomocou „ createElement() “ metóda s “ appendChild() “. Použitím tejto metodiky pridáme možnosti na začiatok značky select.
Syntax
Na pridanie voľby do značky select zo vstupného textu pomocou metódy appendChild() použite nasledujúcu syntax:
appendChild ( newOptionValue ) ;Príklad
Tu vytvoríme rozbaľovací zoznam pridaním dvoch možností “ C “ a „ C++ “, vstupné pole a tlačidlo, ktoré zavolá používateľom definovanú funkciu JavaScript s názvom „ insertOption() ” keď sa spustí jeho udalosť onclick:
< typ vstupu = 'text' id = 'TXT' zástupný symbol = 'Zadajte text na pridanie možnosti' >< vybrať id = 'rozbaľovacia ponuka' >
< možnosť > C možnosť >
< možnosť > C ++ možnosť >
vyberte >
< br < br >
< tlačidlo onclick = 'insertOption();' > Pridať možnosť tlačidlo >
Vo funkcii s názvom „ insertOption() “, najprv prejdite k prvku select a textovému poľu pomocou ich priradených id a potom zavolajte metódy createElement() a createTextNode() na vytvorenie inštancie možnosti a získajte textovú hodnotu ako možnosť. Potom zavolajte metódu appendChild() a odovzdajte textovú hodnotu ako možnosť, potom pridajte túto možnosť na začiatok zoznamu výberu pomocou „ insertBefore() “ metóda s výberom prvku:
functioninsertOption ( ){
var vyberte = dokument. getElementById ( 'rozbaľovacia ponuka' ) ,
textValue = dokument. getElementById ( 'TXT' ) . hodnotu ,
nová možnosť = dokument. createElement ( 'možnosť' ) ,
newOptionValue = dokument. createTextNode ( textValue ) ;
nová možnosť. appendChild ( newOptionValue ) ;
vyberte. vložiťPred ( nová možnosť, vyberte. prvéDieťa ) ;
}
Ako vidíte, výstup ukazuje, že nová možnosť z textového poľa je pridaná na začiatok rozbaľovacej ponuky:
Zostavili sme všetky možné riešenia na pridávanie možností zo vstupného textu do značky select.
Záver
Ak chcete pridať možnosť zo vstupného textu do značky select pomocou JavaScriptu, môžete použiť vstavané metódy JavaScriptu vrátane metódy add() alebo appendChild(). Voľby môžete pridať do značky výberu na začiatku zoznamu, ako aj na koniec zoznamu. V tomto návode sme definovali postup na pridanie možnosti zo vstupného textu do vybranej značky pomocou JavaScriptu s podrobnými príkladmi.