Tento výukový program definuje postup přidání možnosti ze vstupního textu do značky select pomocí JavaScriptu.
Jak přidat možnost výběru značky ze vstupního textu pomocí JavaScriptu?
Chcete-li přidat možnost ze vstupního textu do vybrané značky pomocí JavaScriptu, můžete použít různé metody, například:
Pojďme prozkoumat každou metodu jednu po druhé!
Metoda 1: Přidat možnost k výběru značky ze vstupního textu pomocí metody add() s konstruktorem možností
Chcete-li přidat možnost ze vstupního textu ve značce select, použijte „ přidat() “ metoda s “ Volba 'Konstruktér.' Metoda add() se používá k přidání prvků do možností „ HTMLSelectElement ” také známý jako značka
Syntax
Chcete-li použít metodu add() pro přidání volby do značky select, postupujte podle zadané syntaxe:
přidat ( možnost, stávající možnost ) ;Zde, „ volba “ představuje novou možnost, která bude přidána namísto „ existujícíMožnost “.
Příklad
Vytvoříme vstupní pole, rozbalovací nabídku pomocí
< vybrat id = 'možnosti' >
< hodnotu opce = 'C' > C volba >
vybrat >
< br < br >
< ID tlačítka = 'přidat btn' při kliknutí = 'insertOption()' > Přidat možnost knoflík >
V souboru JS definujte funkci s názvem „ insertOption() “ a poté pomocí tlačítka „ querySelector() “ metoda. Poté vytvořte instanci možnosti pomocí konstruktoru Option a zavolejte metodu add() předáním existující možnosti a nové možnosti, kterou je třeba přidat na konec seznamu:
functioninsertOption ( ){
konst addBtn = dokument. querySelector ( '#addbtn' ) ;
konst seznam = dokument. querySelector ( '#options' ) ;
konst rozevírací seznam = dokument. querySelector ( '#txt' ) ;
konst volba = Nový Volba ( rozevírací seznam. hodnota , rozevírací seznam. hodnota ) ;
seznam. přidat ( možnost, nedefinováno ) ;
rozevírací seznam. hodnota = '' ;
rozevírací seznam. zaměřit se ( ) ;
}
Výstup ukazuje, že nová možnost z textového pole je přidána na konec rozbalovací nabídky:
Poznámka: Tuto metodu můžete použít k přidání volby na začátek tagu select přidáním hodnoty existující volby jako druhého parametru namísto hodnoty undefined. Přidá novou možnost před stávající.
Pojďme na jiný způsob!
Metoda 2: Přidat možnost pro výběr značky ze vstupního textu pomocí metody createElement() s appendChild()
Existuje další přístup, pomocí kterého můžete vytvořit nový prvek pomocí „ createElement() “ metoda s “ appendChild() “ metoda. Použitím této metodiky přidáme možnosti na začátek značky select.
Syntax
Pro přidání volby do značky select ze vstupního textu pomocí metody appendChild() použijte následující syntaxi:
appendChild ( newOptionValue ) ;Příklad
Zde vytvoříme rozevírací seznam přidáním dvou možností “ C ' a ' C++ “, vstupní pole a tlačítko, které zavolá uživatelem definovanou funkci JavaScript s názvem „ insertOption() ” když je spuštěna jeho událost onclick:
< Typ vstupu = 'text' id = 'txt' zástupný symbol = 'Zadejte text pro přidání možnosti' >< vybrat id = 'rozbalovací nabídka' >
< volba > C volba >
< volba > C ++ volba >
vybrat >
< br < br >
< tlačítko onclick = 'insertOption();' > Přidat možnost knoflík >
Ve funkci s názvem „ insertOption() “, nejprve přistupte k prvku select a textovému poli pomocí jejich přiřazených id a poté zavolejte metody createElement() a createTextNode() pro vytvoření instance možnosti a načtěte hodnotu textu jako možnost. Poté zavolejte metodu appendChild() a předejte textovou hodnotu jako možnost, poté přidejte tuto možnost na začátek seznamu výběru pomocí „ insertBefore() metoda s výběrem prvku:
functioninsertOption ( ){
var vybrat = dokument. getElementById ( 'rozbalovací nabídka' ) ,
textValue = dokument. getElementById ( 'txt' ) . hodnota ,
nová možnost = dokument. createElement ( 'Volba' ) ,
newOptionValue = dokument. createTextNode ( textValue ) ;
nová možnost. appendChild ( newOptionValue ) ;
vybrat. vložitPřed ( nová možnost, vyberte. první dítě ) ;
}
Jak vidíte, výstup ukazuje, že nová možnost z textového pole je přidána na začátek rozbalovací nabídky:
Sestavili jsme všechna možná řešení pro přidání možností ze vstupního textu do značky select.
Závěr
Chcete-li přidat volbu ze vstupního textu do značky select pomocí JavaScriptu, můžete použít vestavěné metody JavaScriptu, včetně metody add() nebo appendChild(). Volby můžete přidat do značky select na začátek seznamu i na konec seznamu. V tomto tutoriálu jsme definovali postup přidání možnosti ze vstupního textu do značky select pomocí JavaScriptu s podrobnými příklady.