Ang tutorial na ito ay tutukuyin ang pamamaraan upang magdagdag ng isang opsyon mula sa isang input text sa isang piling tag gamit ang JavaScript.
Paano Magdagdag ng Opsyon upang Pumili ng Tag Mula sa Input Text Gamit ang JavaScript?
Upang magdagdag ng opsyon mula sa isang input text sa isang piling tag gamit ang JavaScript, maaari kang gumamit ng iba't ibang paraan, gaya ng:
Tuklasin natin ang bawat pamamaraan nang paisa-isa!
Paraan 1: Magdagdag ng Opsyon upang Pumili ng Tag Mula sa Input na Teksto Gamit ang add() na Paraan na may Option Constructor
Para sa pagdaragdag ng opsyon mula sa input text sa isang piling tag, gamitin ang “ magdagdag () 'paraan na may ' Pagpipilian ” Konstruktor. Ang paraan ng add() ay ginagamit upang idagdag ang mga elemento sa mga opsyon ng “ HTMLSelectElement ” na kilala rin bilang
Syntax
Sundin ang ibinigay na syntax upang magamit ang paraan ng add() para sa pagdaragdag ng opsyon sa isang piling tag:
idagdag ( opsyon, existingOption ) ;Dito, ang ' opsyon Ang ” ay kumakatawan sa bagong opsyon na idadagdag bilang kapalit ng “ existingOption ”.
Halimbawa
Gagawa kami ng input field, isang drop-down na menu gamit ang tag at isang button na magdaragdag ng mga bagong opsyon sa isang piling elemento, na humihiling ng “ insertOption() ” function kapag na-click ito:
< uri ng input = 'text' id = 'txt' placeholder = 'Maglagay ng teksto upang magdagdag ng opsyon' >< piliin ang id = 'mga opsyon' >
< halaga ng opsyon = 'c' > C opsyon >
pumili >
< br >< br >
< button id = 'magdagdag ng btn' onclick = 'insertOption()' > Magdagdag ng Opsyon pindutan >
Sa JS file, tukuyin ang isang function na pinangalanang ' insertOption() ” at pagkatapos ay i-access ang button, textbox, at ang piling elemento kasama ang kanilang nakatalagang id gamit ang “ querySelector() ” paraan. Pagkatapos, lumikha ng isang halimbawa ng opsyon gamit ang Option constructor, at tawagan ang add() na paraan sa pamamagitan ng pagpasa sa umiiral na opsyon at ang bagong opsyon na kailangang idagdag sa dulo ng listahan:
functioninsertOption ( ){
const addBtn = dokumento. querySelector ( '#addbtn' ) ;
const kahon ng listahan = dokumento. querySelector ( '#options' ) ;
const dropdown = dokumento. querySelector ( '#txt' ) ;
const opsyon = bago Pagpipilian ( dropdown. halaga , dropdown. halaga ) ;
kahon ng listahan. idagdag ( opsyon, hindi natukoy ) ;
dropdown. halaga = '' ;
dropdown. focus ( ) ;
}
Ipinapakita ng output na ang bagong opsyon mula sa field ng teksto ay idinagdag sa dulo ng drop-down na menu:
Tandaan: Magagamit mo ang paraang ito upang idagdag ang opsyon sa simula ng piling tag sa pamamagitan ng pagdaragdag ng halaga ng umiiral nang opsyon bilang pangalawang parameter sa halip na hindi natukoy. Idaragdag nito ang bagong opsyon bago ang umiiral na.
Lumipat tayo sa ibang paraan!
Paraan 2: Magdagdag ng Opsyon upang Pumili ng Tag Mula sa Input na Teksto Gamit ang createElement() Gamit ang AppendChild() na Paraan
May isa pang diskarte kung saan maaari kang lumikha ng isang bagong elemento gamit ang ' createElement() 'paraan na may ' appendChild() ” paraan. Sa paggamit ng pamamaraang ito, idaragdag namin ang mga opsyon sa simula ng piling tag.
Syntax
Gamitin ang sumusunod na syntax para sa pagdaragdag ng opsyon sa piling tag mula sa input text gamit ang appendChild() na paraan:
idagdagBata ( newOptionValue ) ;Halimbawa
Dito, gagawa kami ng dropdown list sa pamamagitan ng pagdaragdag ng dalawang opsyon ' C 'at' C++ ”, isang input field at isang button na tatawag sa function na JavaScript na tinukoy ng user na pinangalanang “ insertOption() ” kapag na-trigger ang onclick event nito:
< uri ng input = 'text' id = 'txt' placeholder = 'Magpasok ng teksto upang magdagdag ng opsyon' >< piliin ang id = 'dropdown' >
< opsyon > C opsyon >
< opsyon > C ++ opsyon >
pumili >
< br >< br >
< button sa pag-click = 'insertOption();' > Magdagdag ng Opsyon pindutan >
Sa isang function na pinangalanang ' insertOption() ”, i-access muna ang piling elemento at ang field ng text gamit ang kanilang mga nakatalagang id at pagkatapos, tawagan ang createElement() at createTextNode() na mga pamamaraan para sa paglikha ng isang opsyon na halimbawa at kunin ang text value bilang isang opsyon. Pagkatapos nito, tawagan ang appendChild() na paraan at ipasa ang text value bilang isang opsyon pagkatapos, idagdag ang opsyong ito sa simula ng piling listahan gamit ang “ insertBefore() 'paraan na may piling elemento:
functioninsertOption ( ){
var piliin = dokumento. getElementById ( 'dropdown' ) ,
textValue = dokumento. getElementById ( 'txt' ) . halaga ,
newOption = dokumento. createElement ( 'Pagpipilian' ) ,
newOptionValue = dokumento. createTextNode ( textValue ) ;
newOption. idagdagBata ( newOptionValue ) ;
pumili. ipasokBago ( newOption, piliin. unang anak ) ;
}
Tulad ng nakikita mo na ang output ay nagpapakita na ang bagong opsyon mula sa field ng teksto ay idinagdag sa simula ng drop-down na menu:
Pinagsama-sama namin ang lahat ng posibleng solusyon para sa pagdaragdag ng mga opsyon mula sa isang input text patungo sa piling tag.
Konklusyon
Upang magdagdag ng opsyon mula sa isang input text sa isang piling tag gamit ang JavaScript, maaari mong gamitin ang JavaScript built-in na pamamaraan, kabilang ang add() na paraan o appendChild() na paraan. Maaari kang magdagdag ng mga opsyon sa isang piling tag sa simula ng listahan pati na rin sa dulo ng listahan. Sa tutorial na ito, tinukoy namin ang pamamaraan upang magdagdag ng isang opsyon mula sa isang input text sa isang piling tag gamit ang JavaScript na may mga detalyadong halimbawa.