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

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

ड्रॉपडाउन HTML तत्व

आइए एक त्वरित पुनर्कथन करें कि HTML का उपयोग करके ड्रॉपडाउन तत्व कैसे बनाया जाए। अगर आप खो जाते हैं तो मेरे कोडपेन का अनुसरण करें।

हमारे ड्रॉपडाउन तत्व को बनाने के लिए हमें select . का उपयोग करने की आवश्यकता है टैग करें और option का उपयोग करें उसके नीचे बसे बच्चे। चुनिंदा तत्व ड्रॉपडाउन बनाता है और विकल्प टैग के साथ हम उन विकल्पों को परिभाषित करते हैं जो ड्रॉपडाउन में रहेंगे।

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

<select name="fruits" id="fruits">
  <option value="">--select--</option>
  <option value="avocado">Avocado🥑</option>
  <option value="watermelon">Watermelon🍉</option>
  <option value="kiwi">Kiwi🥝</option>
  <option value="tomato">Tomato🍅</option>
</select>
<h2 id="pick"></h2>

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

मूल्य संपत्ति के महत्व पर ध्यान दें . यह संपत्ति हमें गैर-शैलीबद्ध डेटा देती है जिसे हम आसानी से जावास्क्रिप्ट के साथ खेल सकते हैं। दूसरी ओर विकल्प टैग के अंदर का पाठ काफी कुछ भी हो सकता है, इसलिए यह विश्वसनीय नहीं है। मूल्य संपत्ति वह है जो यहां महत्वपूर्ण है।

जावास्क्रिप्ट के साथ ड्रॉपडाउन मान चुनना और प्रदर्शित करना

सबसे पहले हमें getElementById . का उपयोग करके अपने फ्रूट ड्रॉपडाउन को चुनना होगा चुनिंदा टैग पर।

const element = document.getElementById("fruits");

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

81% प्रतिभागियों ने कहा कि बूटकैंप में भाग लेने के बाद उन्हें अपनी तकनीकी नौकरी की संभावनाओं के बारे में अधिक आत्मविश्वास महसूस हुआ। आज ही एक बूटकैंप से मिलान करें।

बूटकैंप शुरू करने से लेकर अपनी पहली नौकरी खोजने तक, औसत बूटकैंप ग्रेड ने करियर संक्रमण में छह महीने से भी कम समय बिताया।

const checkValue = element.options[element.selectedIndex].value;
const checkText = element.options[element.selectedIndex].text;

यहां हम एलीमेंट ऑप्शंस ऐरे एट्रीब्यूट को एक्सेस कर रहे हैं। फिर हम वर्तमान में चयनित विकल्प के सूचकांक का चयन करते हैं और इसके मूल्य या पाठ तक पहुँच प्राप्त करते हैं।

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

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

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

element.addEventListener("change", (e) => {
  const value = e.target.value;
  const text = element.options[element.selectedIndex].text;
 
  if (value) {
    document.getElementById("pick").textContent = `Value Selected: ${value}`;
  } else {
    document.getElementById("pick").textContent = "";
  }
});

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

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

निष्कर्ष

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