जावास्क्रिप्ट का चयन करें

| | | | | | | | | | | | | | | | | | | | | | | | | | | | |

जैसा कि आप सीखेंगे कि वेब फ़ॉर्म कैसे बनाएं, सबसे सामान्य कार्यों में से एक ड्रॉप-डाउन मेनू से मान प्राप्त करना है। इस लेख में, हम सीखेंगे कि जावास्क्रिप्ट के साथ इन मूल्यों को कैसे प्राप्त किया जाए। अगर आप खो जाते हैं तो मेरे कोडपेन का अनुसरण करें।

अपना ड्रॉप डाउन तत्व बनाने के लिए हमें चयन का उपयोग करना होगा और विकल्प का उपयोग करना होगा जो नीचे नेस्टेड है। चयन तत्व ड्रॉप-डाउन मेनू बनाता है और विकल्प टैग के साथ हम इन विकल्पों को ड्रॉप-डाउन मेनू में लाइव सेट करते हैं।

आइए अपने पसंदीदा फलों (जिसमें इमोजी होते हैं) का ड्रॉपडाउन मेनू बनाते हैं।

हमने एक खाली h2 जोड़ा है जिसे हम बाद में JavaScript से भरेंगे। इस बिंदु पर आप अपना पसंदीदा फल चुन सकते हैं:

92151925 81da0a00 Ede7 11EA 9796 2a8a506c4a6e

यहां हम विशेषता विकल्प d ` सरणी तत्व का उपयोग करते हैं। इसके बाद, हम चयनित विकल्प की अनुक्रमणिका चुनते हैं और इसके मान या टेक्स्ट तक पहुंचते हैं।

अब दोनों चरों को कंसोल.लॉग करने का प्रयास करें। क्या चल रहा है? कुछ नहीं। क्यों? क्योंकि हमारे पहले तत्व का एक खाली मूल्य है (यह सिर्फ एक प्लेसहोल्डर है)। पहले विकल्प पर अपनी राय दें और पुनः प्रयास करें। वाह! हमें जावास्क्रिप्ट के साथ मूल्य और टेक्स्ट मिलता है।

जावास्क्रिप्ट के साथ ड्रॉप डाउन मेनू परिवर्तन सुनना

हमें अपने ड्रॉपडाउन मेनू को गतिशील बनाने की आवश्यकता है क्योंकि जावास्क्रिप्ट आपके पृष्ठ पर परिवर्तनों पर प्रतिक्रिया करने के लिए डिज़ाइन किया गया है। इसे ध्यान में रखते हुए, हम अपने फल तत्व को एक eventListener असाइन करने जा रहे हैं।

हमारे eventListener से हम अपने ड्रॉप-डाउन मेन्यू में बदलाव सुनते हैं। ध्यान दें कि आप e.target.value चलाकर भी चयनित विकल्प का मान प्राप्त कर सकते हैं, जिसे आपने शायद किसी अन्य ट्यूटोरियल मॉड्यूल में देखा होगा।

हम यहां हैं। अब आप एक फल विकल्प का चयन कर सकते हैं और जावास्क्रिप्ट हमारे ड्रॉप-डाउन मेनू में परिवर्तनों पर प्रतिक्रिया करेगा और तदनुसार हमारे h2 को अपडेट करेगा। सफल कानून

92155152 88b74b80 Edec 11EA 8016 7f8911f26735

निष्कर्ष

वेब विकास सीखते समय मूल्यों का खुलासा करना ‚Äã‚Äãएक आवश्यक कौशल है। यदि हम उपयोगकर्ता के लिए एक बुनियादी डेटा शो सेलेक्ट को अपडेट करना चाहते हैं तो हमें जो मूल्य मिलते हैं वे महत्वपूर्ण हैं। DOM में बदलाव के लिए बस "प्रतिक्रिया" करें। जावास्क्रिप्ट के साथ हम कुछ ही समय में ये मान प्राप्त कर सकते हैं

<फॉर्म मेथड = "गेट "रोल ई = "फॉर्म" आईडी = "संपर्कफॉर्म 2" वर्ग = "संपर्क फ़ॉर्म" डेटा- टी ओगल = "सत्यापनकर्ता" क्रिया = "https://python.engineering/fasttrack/sign-up/"> <इनपुट प्रकार = "छिपा हुआ" नाम = "" मान = "सीके_सोर्स करियरकर्मा- वेब"> <इनपुट प्रकार = "छिपा हुआ" नाम = "सीके_मीडियम" मान = "ब्लॉग"> छुपा "नाम =" डेबिट "मान =" एसएफटी "> <बटन प्रकार =" सबमिट करें "आईडी =" सबमिट 4 "वर्ग =" "शैली =" बीटीएन बीटीएन-सफलता बीटीएन-बटन ब्लॉक-अजाक्स-आकार पृष्ठभूमि रंग: # ff9d38! जरूरी; सीमा रंग: # ff9d38; अस्पष्टता: 1; सफेद रंग; चौड़ाई: 100%; फोंट की मोटाई: बोल्ड; आकार का फ़ॉन्ट: 13px; "> गेम प्राप्त करें