ఈ ట్యుటోరియల్ జావాస్క్రిప్ట్‌ని ఉపయోగించి ఇన్పుట్ టెక్స్ట్ నుండి ఎంపిక చేసిన ట్యాగ్‌కి ఎంపికను జోడించే విధానాన్ని నిర్వచిస్తుంది.
జావాస్క్రిప్ట్ ఉపయోగించి ఇన్పుట్ టెక్స్ట్ నుండి ట్యాగ్‌ని ఎంచుకోవడానికి ఎంపికను ఎలా జోడించాలి?
JavaScriptని ఉపయోగించి ఎంపిక చేసిన ట్యాగ్‌కి ఇన్పుట్ టెక్స్ట్ నుండి ఎంపికను జోడించడానికి, మీరు వివిధ పద్ధతులను ఉపయోగించవచ్చు, అవి:
ఒక్కో పద్ధతిని ఒక్కొక్కటిగా అన్వేషిద్దాం!
విధానం 1: ఎంపిక కన్‌స్ట్రక్టర్‌తో add() పద్ధతిని ఉపయోగించి ఇన్పుట్ టెక్స్ట్ నుండి ట్యాగ్‌ని ఎంచుకోవడానికి ఎంపికను జోడించండి
ఎంచుకున్న ట్యాగ్‌లో ఇన్పుట్ టెక్స్ట్ నుండి ఎంపికను జోడించడం కోసం, “ని ఉపయోగించండి జోడించు() 'తో పద్ధతి' ఎంపిక ” కన్స్ట్రక్టర్. '' యొక్క ఎంపికలకు మూలకాలను జోడించడానికి add() పద్ధతి ఉపయోగించబడుతుంది. HTMLసెలెక్ట్ ఎలిమెంట్ ”ని
వాక్యనిర్మాణం
ఎంచుకున్న ట్యాగ్‌లో ఎంపికను జోడించడం కోసం యాడ్() పద్ధతిని ఉపయోగించడానికి అందించిన సింటాక్స్‌ని అనుసరించండి:
జోడించు ( ఎంపిక, ఇప్పటికే ఉన్న ఎంపిక ) ;ఇక్కడ, ' ఎంపిక '' స్థానంలో జోడించబడే కొత్త ఎంపికను సూచిస్తుంది ఇప్పటికే ఉన్న ఎంపిక ”.
ఉదాహరణ
మేము ఇన్పుట్ ఫీల్డ్‌ని, డ్రాప్-డౌన్ మెనుని ఉపయోగించి సృష్టిస్తాము <ఎంచుకోండి> ట్యాగ్ మరియు ఎంపిక చేసిన మూలకంలో కొత్త ఎంపికలను జోడించే బటన్, ' ఇన్సర్ట్ ఆప్షన్() 'అది క్లిక్ చేసినప్పుడు ఫంక్షన్:
< ఇన్పుట్ రకం = 'వచనం' id = 'పదము' ప్లేస్‌హోల్డర్ = 'ఐచ్ఛికాన్ని జోడించడానికి వచనాన్ని నమోదు చేయండి' >< ఐడిని ఎంచుకోండి = 'ఐచ్ఛికాలు' >
< ఎంపిక విలువ = 'సి' > సి ఎంపిక >
ఎంచుకోండి >
< br >< br >
< బటన్ id = 'btn జోడించండి' క్లిక్ చేయండి = 'ఇన్సర్ట్ ఆప్షన్()' > ఎంపికను జోడించండి బటన్ >
JS ఫైల్‌లో, “” అనే ఫంక్షన్‌ను నిర్వచించండి ఇన్సర్ట్ ఆప్షన్() ” ఆపై బటన్, టెక్స్ట్‌బాక్స్ మరియు సెలెక్ట్ ఎలిమెంట్‌ని వాటికి కేటాయించిన ఐడితో యాక్సెస్ చేయండి “ క్వెరీ సెలెక్టర్() ” పద్ధతి. ఆపై, ఎంపిక కన్‌స్ట్రక్టర్‌ని ఉపయోగించి ఎంపిక యొక్క ఉదాహరణను సృష్టించండి మరియు ఇప్పటికే ఉన్న ఎంపికను మరియు జాబితా చివరిలో జోడించాల్సిన కొత్త ఎంపికను పాస్ చేయడం ద్వారా add() పద్ధతికి కాల్ చేయండి:
ఫంక్షన్ఇన్సర్ట్ ఆప్షన్ ( ){
స్థిరంగా addBtn = పత్రం. querySelector ( '#addbtn' ) ;
స్థిరంగా జాబితా పెట్టె = పత్రం. querySelector ( '# ఎంపికలు' ) ;
స్థిరంగా కింద పడేయి = పత్రం. querySelector ( '#పదము' ) ;
స్థిరంగా ఎంపిక = కొత్త ఎంపిక ( కింద పడేయి. విలువ , కింద పడేయి. విలువ ) ;
జాబితా పెట్టె. జోడించు ( ఎంపిక, నిర్వచించబడలేదు ) ;
కింద పడేయి. విలువ = '' ;
కింద పడేయి. దృష్టి ( ) ;
}
టెక్స్ట్ ఫీల్డ్ నుండి కొత్త ఎంపిక డ్రాప్-డౌన్ మెను చివరిలో జోడించబడిందని అవుట్‌పుట్ చూపిస్తుంది:
గమనిక: మీరు ఎంపిక ట్యాగ్ ప్రారంభంలో ఎంపికను జోడించడానికి ఈ పద్ధతిని ఉపయోగించవచ్చు, ఇప్పటికే ఉన్న ఎంపిక యొక్క విలువను నిర్వచించబడకుండా రెండవ పారామీటర్‌గా జోడించడం ద్వారా. ఇది ఇప్పటికే ఉన్న ఎంపిక కంటే ముందు కొత్త ఎంపికను జోడిస్తుంది.
ఇతర పద్ధతికి వెళ్దాం!
విధానం 2: appendChild() పద్ధతితో createElement()ని ఉపయోగించి ఇన్పుట్ టెక్స్ట్ నుండి ట్యాగ్‌ని ఎంచుకోవడానికి ఎంపికను జోడించండి
మీరు 'ని ఉపయోగించి కొత్త మూలకాన్ని సృష్టించగల మరొక విధానం ఉంది. క్రియేట్ ఎలిమెంట్() 'తో పద్ధతి' appendChild() ” పద్ధతి. ఈ పద్ధతిని ఉపయోగించడం ద్వారా, ఎంపిక చేసిన ట్యాగ్ ప్రారంభంలో మేము ఎంపికలను జోడిస్తాము.
వాక్యనిర్మాణం
appendChild() పద్ధతిని ఉపయోగించి ఇన్పుట్ టెక్స్ట్ నుండి ఎంపిక చేసిన ట్యాగ్‌లో ఎంపికను జోడించడానికి క్రింది వాక్యనిర్మాణాన్ని ఉపయోగించండి:
అనుబంధం చైల్డ్ ( కొత్త ఎంపిక విలువ ) ;ఉదాహరణ
ఇక్కడ, మేము రెండు ఎంపికలను జోడించడం ద్వారా డ్రాప్‌డౌన్ జాబితాను సృష్టిస్తాము ' సి 'మరియు' C++ ”, ఇన్పుట్ ఫీల్డ్ మరియు యూజర్ నిర్వచించిన జావాస్క్రిప్ట్ ఫంక్షన్‌ని పిలిచే బటన్ “ ఇన్సర్ట్ ఆప్షన్() ” దాని ఆన్‌క్లిక్ ఈవెంట్ ట్రిగ్గర్ అయినప్పుడు:
< ఇన్పుట్ రకం = 'వచనం' id = 'పదము' ప్లేస్‌హోల్డర్ = 'ఐచ్ఛికాన్ని జోడించడానికి వచనాన్ని నమోదు చేయండి' >< ఐడిని ఎంచుకోండి = 'కింద పడేయి' >
< ఎంపిక > సి ఎంపిక >
< ఎంపిక > సి ++ ఎంపిక >
ఎంచుకోండి >
< br >< br >
< బటన్ క్లిక్ చేయండి = 'insertOption();' > ఎంపికను జోడించండి బటన్ >
అనే ఫంక్షన్‌లో ' ఇన్సర్ట్ ఆప్షన్() ”, ముందుగా ఎంపిక చేసిన మూలకం మరియు టెక్స్ట్ ఫీల్డ్‌ని వాటికి కేటాయించిన idలను ఉపయోగించి యాక్సెస్ చేయండి, ఆపై, ఒక ఎంపిక ఉదాహరణను సృష్టించడానికి createElement() మరియు createTextNode() పద్ధతులకు కాల్ చేయండి మరియు టెక్స్ట్ విలువను ఒక ఎంపికగా పొందండి. ఆ తర్వాత, appendChild() పద్ధతికి కాల్ చేసి, టెక్స్ట్ విలువను ఒక ఎంపికగా పాస్ చేయండి, ఆపై ఎంపిక జాబితా ప్రారంభంలో ఈ ఎంపికను “ని ఉపయోగించి జోడించండి ముందు చొప్పించు() ఎంపిక మూలకంతో పద్ధతి:
ఫంక్షన్ఇన్సర్ట్ ఆప్షన్ ( ){
var ఎంపిక = పత్రం. getElementById ( 'కింద పడేయి' ) ,
వచన విలువ = పత్రం. getElementById ( 'పదము' ) . విలువ ,
కొత్త ఎంపిక = పత్రం. ఎలిమెంట్ సృష్టించండి ( 'ఎంపిక' ) ,
కొత్త ఎంపిక విలువ = పత్రం. టెక్స్ట్‌నోడ్‌ని సృష్టించండి ( వచన విలువ ) ;
కొత్త ఎంపిక. అనుబంధం చైల్డ్ ( కొత్త ఎంపిక విలువ ) ;
ఎంచుకోండి. ముందు చొప్పించు ( కొత్త ఎంపిక, ఎంచుకోండి. మొదటి బిడ్డ ) ;
}
డ్రాప్-డౌన్ మెను ప్రారంభంలో టెక్స్ట్ ఫీల్డ్ నుండి కొత్త ఎంపిక జోడించబడిందని అవుట్‌పుట్ చూపుతుందని మీరు చూడగలరు:
మేము ఇన్పుట్ టెక్స్ట్ నుండి ఎంపిక చేసిన ట్యాగ్‌కి ఎంపికలను జోడించడం కోసం సాధ్యమయ్యే అన్ని పరిష్కారాలను సంకలనం చేసాము.
ముగింపు
JavaScriptను ఉపయోగించి ఎంపిక చేసిన ట్యాగ్‌కి ఇన్పుట్ టెక్స్ట్ నుండి ఎంపికను జోడించడానికి, మీరు add() పద్ధతి లేదా appendChild() పద్ధతితో సహా JavaScript అంతర్నిర్మిత పద్ధతులను ఉపయోగించవచ్చు. మీరు జాబితా ప్రారంభంలో అలాగే జాబితా చివరిలో ఎంపిక చేసిన ట్యాగ్‌లో ఎంపికలను జోడించవచ్చు. ఈ ట్యుటోరియల్‌లో, వివరణాత్మక ఉదాహరణలతో జావాస్క్రిప్ట్‌ని ఉపయోగించి ఇన్పుట్ టెక్స్ట్ నుండి ఎంపిక చేసిన ట్యాగ్‌కి ఎంపికను జోడించే విధానాన్ని మేము నిర్వచించాము.