यह ट्यूटोरियल जावास्क्रिप्ट का उपयोग करके एक इनपुट टेक्स्ट से एक चुनिंदा टैग में एक विकल्प जोड़ने की प्रक्रिया को परिभाषित करेगा।
जावास्क्रिप्ट का उपयोग करके इनपुट टेक्स्ट से टैग चुनने का विकल्प कैसे जोड़ें?
जावास्क्रिप्ट का उपयोग करके एक इनपुट टेक्स्ट से एक चुनिंदा टैग में एक विकल्प जोड़ने के लिए, आप विभिन्न विधियों का उपयोग कर सकते हैं, जैसे:
आइए प्रत्येक विधि को एक-एक करके देखें!
विधि 1: इनपुट टेक्स्ट से टैग का चयन करने के लिए विकल्प जोड़ें () विकल्प कंस्ट्रक्टर के साथ विधि का उपयोग करें
एक चुनिंदा टैग में इनपुट टेक्स्ट से एक विकल्प जोड़ने के लिए, “का उपयोग करें” जोड़ें() 'विधि' के साथ विकल्प 'निर्माता। ऐड () विधि का उपयोग “के विकल्पों में तत्वों को जोड़ने के लिए किया जाता है” एचटीएमएलसेलेक्ट एलिमेंट ” को
वाक्य - विन्यास
चयनित टैग में विकल्प जोड़ने के लिए ऐड () विधि का उपयोग करने के लिए दिए गए सिंटैक्स का पालन करें:
जोड़ें ( विकल्प, मौजूदाविकल्प ) ;यहां ही ' विकल्प 'नए विकल्प का प्रतिनिधित्व करता है जिसे' के स्थान पर जोड़ा जा रहा है मौजूदा विकल्प '
उदाहरण
हम एक इनपुट फ़ील्ड बनाएंगे, एक ड्रॉप-डाउन मेनू का उपयोग करके <चुनें> टैग और एक बटन जो एक चुनिंदा तत्व में नए विकल्प जोड़ देगा, ' सम्मिलित विकल्प () ' फ़ंक्शन जब इसे क्लिक किया जाता है:
< निवेष का प्रकार = 'मूलपाठ' पहचान = 'टेक्स्ट' प्लेसहोल्डर = 'विकल्प जोड़ने के लिए टेक्स्ट दर्ज करें' >< आईडी चुनें = 'विकल्प' >
< विकल्प मान = 'सी' > सी विकल्प >
चुनते हैं >
< बीआर >< बीआर >
< बटन आईडी = 'बीटीएन जोड़ें' क्लिक पर = 'सम्मिलित विकल्प ()' > विकल्प जोड़ें बटन >
जेएस फ़ाइल में, 'नाम के एक फ़ंक्शन को परिभाषित करें' सम्मिलित विकल्प () 'और फिर बटन, टेक्स्टबॉक्स और चुनिंदा तत्व को उनकी निर्दिष्ट आईडी के साथ' का उपयोग करके एक्सेस करें क्वेरी चयनकर्ता () ' तरीका। फिर, विकल्प कंस्ट्रक्टर का उपयोग करके विकल्प का एक उदाहरण बनाएं, और मौजूदा विकल्प और सूची के अंत में जोड़े जाने वाले नए विकल्प को पास करके ऐड () विधि को कॉल करें:
फ़ंक्शन सम्मिलित करेंविकल्प ( ){
स्थिरांक AddBtn = दस्तावेज़। क्वेरी चयनकर्ता ( '#addbtn' ) ;
स्थिरांक सूची बाक्स = दस्तावेज़। क्वेरी चयनकर्ता ( '#विकल्प' ) ;
स्थिरांक ड्रॉप डाउन = दस्तावेज़। क्वेरी चयनकर्ता ( '#टेक्स्ट' ) ;
स्थिरांक विकल्प = नया विकल्प ( ड्रॉप डाउन। मूल्य , ड्रॉप डाउन। मूल्य ) ;
सूची बाक्स। जोड़ें ( विकल्प, अपरिभाषित ) ;
ड्रॉप डाउन। मूल्य = '' ;
ड्रॉप डाउन। केंद्र ( ) ;
}
आउटपुट से पता चलता है कि ड्रॉप-डाउन मेनू के अंत में टेक्स्ट फ़ील्ड से नया विकल्प जोड़ा गया है:
टिप्पणी: आप मौजूदा विकल्प के मान को अपरिभाषित के बजाय दूसरे पैरामीटर के रूप में जोड़कर चयन टैग की शुरुआत में विकल्प जोड़ने के लिए इस पद्धति का उपयोग कर सकते हैं। यह मौजूदा विकल्प से पहले नया विकल्प जोड़ देगा।
चलिए दूसरी विधि की ओर बढ़ते हैं!
विधि 2: createElement () के साथ appendChild () विधि का उपयोग करके इनपुट टेक्स्ट से टैग का चयन करने का विकल्प जोड़ें
एक और तरीका है जिसका उपयोग करके आप 'का उपयोग करके एक नया तत्व बना सकते हैं' क्रिएट एलिमेंट () 'विधि' के साथ अपेंड चाइल्ड() ' तरीका। इस पद्धति का उपयोग करके, हम चुनिंदा टैग की शुरुआत में विकल्प जोड़ देंगे।
वाक्य - विन्यास
एपेंड चाइल्ड () विधि का उपयोग करके इनपुट टेक्स्ट से चुनिंदा टैग में विकल्प जोड़ने के लिए निम्नलिखित सिंटैक्स का उपयोग करें:
अपेंड चाइल्ड ( newOptionValue ) ;उदाहरण
यहां, हम दो विकल्प जोड़कर एक ड्रॉपडाउन सूची बनाएंगे। सी ' तथा ' सी++ ', एक इनपुट फ़ील्ड और एक बटन जो उपयोगकर्ता द्वारा परिभाषित जावास्क्रिप्ट फ़ंक्शन को' नाम से कॉल करेगा सम्मिलित विकल्प () 'जब इसकी ऑनक्लिक घटना चालू हो जाती है:
< निवेष का प्रकार = 'मूलपाठ' पहचान = 'टेक्स्ट' प्लेसहोल्डर = 'विकल्प जोड़ने के लिए टेक्स्ट दर्ज करें' >< आईडी चुनें = 'ड्रॉप डाउन' >
< विकल्प > सी विकल्प >
< विकल्प > सी ++ विकल्प >
चुनते हैं >
< बीआर >< बीआर >
< बटन ऑनक्लिक = 'इन्सर्टऑप्शन ();' > विकल्प जोड़ें बटन >
नाम के एक समारोह में सम्मिलित विकल्प () ', पहले उनके निर्दिष्ट आईडी का उपयोग करके चुनिंदा तत्व और टेक्स्ट फ़ील्ड तक पहुंचें और फिर, विकल्प उदाहरण बनाने के लिए createElement() और createTextNode() विधियों को कॉल करें और टेक्स्ट मान को एक विकल्प के रूप में प्राप्त करें। उसके बाद, appendChild () विधि को कॉल करें और टेक्स्ट मान को एक विकल्प के रूप में पास करें, इस विकल्प को 'का उपयोग करके चयन सूची की शुरुआत में जोड़ें' डालने से पहले () 'चुनिंदा तत्व के साथ विधि:
फ़ंक्शन सम्मिलित करेंविकल्प ( ){
वर चयन = दस्तावेज़। getElementById ( 'ड्रॉप डाउन' ) ,
टेक्स्ट वैल्यू = दस्तावेज़। getElementById ( 'टेक्स्ट' ) . मूल्य ,
नया विकल्प = दस्तावेज़। क्रिएट एलिमेंट ( 'विकल्प' ) ,
newOptionValue = दस्तावेज़। क्रिएटटेक्स्टनोड ( टेक्स्ट वैल्यू ) ;
नया विकल्प। अपेंड चाइल्ड ( newOptionValue ) ;
चुनते हैं। इससे पहले डालें ( नया विकल्प, चुनें। पहला बच्चा ) ;
}
जैसा कि आप देख सकते हैं कि आउटपुट दिखाता है कि टेक्स्ट फ़ील्ड से नया विकल्प ड्रॉप-डाउन मेनू की शुरुआत में जोड़ा गया है:
हमने इनपुट टेक्स्ट से चुनिंदा टैग में विकल्प जोड़ने के लिए सभी संभावित समाधानों को संकलित किया है।
निष्कर्ष
जावास्क्रिप्ट का उपयोग करके किसी इनपुट टेक्स्ट से एक चुनिंदा टैग में एक विकल्प जोड़ने के लिए, आप जावास्क्रिप्ट अंतर्निहित विधियों का उपयोग कर सकते हैं, जिसमें ऐड () विधि या एपेंड चाइल्ड () विधि शामिल है। आप सूची की शुरुआत में और साथ ही सूची के अंत में एक चुनिंदा टैग में विकल्प जोड़ सकते हैं। इस ट्यूटोरियल में, हमने विस्तृत उदाहरणों के साथ जावास्क्रिप्ट का उपयोग करके एक इनपुट टेक्स्ट से एक चुनिंदा टैग में एक विकल्प जोड़ने की प्रक्रिया को परिभाषित किया है।