जैसे-जैसे आप वेब फॉर्म बनाना सीखते हैं, सबसे आम कार्यों में से एक ड्रॉपडाउन से मान प्राप्त करना है। इस आर्टिकल में हम सीखेंगे कि JavaScript के साथ ऐसे मान कैसे प्राप्त करें।
ड्रॉपडाउन HTML एलिमेंट
आइए एक त्वरित पुनर्कथन करें कि HTML का उपयोग करके ड्रॉपडाउन एलिमेंट कैसे बनाया जाता है। यदि आप खो जाते हैं तो मेरा Codepen फॉलो करें।
हमारे ड्रॉपडाउन एलिमेंट को बनाने के लिए हमें select टैग का उपयोग करना होगा और इसके तहत नेस्टेड option चिल्ड्रन का उपयोग करना होगा। 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 जोड़ा जिसे हम बाद में JavaScript से भरेंगे। इस बिंदु पर आप अपना पसंदीदा फल चुन सकते हैं:
value प्रॉपर्टी के महत्व पर ध्यान दें। यह प्रॉपर्टी हमें नॉन-स्टाइलाइज़्ड डेटा देती है जिसे हम JavaScript के साथ आसानी से खेल सकते हैं। दूसरी ओर option टैग के अंदर का टेक्स्ट बहुत कुछ हो सकता है, इसलिए यह विश्वसनीय नहीं है। यहां value प्रॉपर्टी महत्वपूर्ण है।
JavaScript के साथ ड्रॉपडाउन मानों का चयन और प्रदर्शन
सबसे पहले हमें getElementById का उपयोग करके select टैग पर अपने फ्रूट्स ड्रॉपडाउन का चयन करना होगा।
const element = document.getElementById("fruits");
अब जब हमारा ड्रॉपडाउन चुना गया है तो हम वर्तमान में चयनित विकल्प का मान प्राप्त कर सकते हैं। यह डिफ़ॉल्ट रूप से पहला विकल्प है। आइए इसे आज़माएं:
const checkValue = element.options[element.selectedIndex].value; const checkText = element.options[element.selectedIndex].text;
यहां हम एलिमेंट्स के options सरणी एट्रिब्यूट को एक्सेस कर रहे हैं। फिर हम वर्तमान में चयनित विकल्प के इंडेक्स का चयन करते हैं और इसके value या text को एक्सेस करते हैं।
अब दोनों वेरिएबल्स को console.log करने का प्रयास करें। क्या होता है? कुछ नहीं। क्यों? क्योंकि हमारा पहला एलिमेंट एक खाली मान रखता है (यह सिर्फ एक प्लेसहोल्डर है)। पहले विकल्प को कमेंट आउट करें और फिर से प्रयास करें। याय! हमें JavaScript के साथ value और text दोनों मिलते हैं।
JavaScript के साथ ड्रॉपडाउन परिवर्तनों को सुनना
हमें अपने ड्रॉपडाउन को डायनामिक बनाना चाहिए क्योंकि JavaScript आपके पेज में परिवर्तनों पर प्रतिक्रिया करने के लिए डिज़ाइन किया गया है। इसे ध्यान में रखते हुए हम अपने फ्रूट एलिमेंट को एक 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 करके चयनित विकल्प का मान भी प्राप्त कर सकते हैं, यह आपने शायद फॉर्म्स के बारे में किसी अन्य ट्यूटोरियल में देखा होगा।
हम पहुंच गए। अब आप किसी भी फल विकल्प का चयन कर सकते हैं और JavaScript हमारे ड्रॉपडाउन में परिवर्तनों पर प्रतिक्रिया दे रहा है और हमारे h2 को तदनुसार अपडेट कर रहा है। बहुत फलदायी सही!
निष्कर्ष
ड्रॉपडाउन मान प्राप्त करना एक महत्वपूर्ण कौशल है जैसे-जैसे आप वेब डेवलपमेंट सीखते हैं। हम जो मान प्राप्त करते हैं वे महत्वपूर्ण हैं यदि हम डेटाबेस अपडेट करना चाहते हैं, यूज़र को चयन दिखाना चाहते हैं या सिर्फ DOM परिवर्तनों पर 'प्रतिक्रिया' करना चाहते हैं। JavaScript के साथ हम ऐसे मान बिना समय गंवाए प्राप्त कर सकते हैं।
