JavaScript ड्रॉपडाउन से चयनित मान कैसे प्राप्त करें: पूरी गाइड

शुरुआती लोगों के लिए ऑनलाइन Python प्रशिक्षक

Python आसानी से सीखें बिना सिद्धांत के बोझ के। स्वचालित जांच के साथ व्यावहारिक कार्य हल करें और ब्राउज़र में सीधे कोड लिखें।

पाठ्यक्रम शुरू करें

अब अनुमान लगाना बंद करें: JavaScript में ड्रॉपडाउन से चयनित मान कैसे निकालें?

\n\n

क्या आपने कभी ऐसी स्थिति का सामना किया है जब उपयोगकर्ता वेबसाइट पर ड्रॉपडाउन सूची से कुछ चुनता है, लेकिन आपका प्रोग्राम इसे "देख" नहीं पाता? परिचित लगता है, है ना? यह Stack Overflow पर सबसे आम प्रश्नों में से एक है (और सही भी है!), जो हजारों शुरुआती और अनुभवी डेवलपर्स पूछते हैं। इसमें मुश्किल क्या हो सकता है? लेकिन कुछ बारीकियाँ हैं, और आज हम उन्हें हमेशा के लिए समझ लेंगे।

\n\n

इस लेख में, मैं आपको शुद्ध JavaScript का उपयोग करके ड्रॉपडाउन से चयनित मान प्राप्त करने के एक नहीं, बल्कि कई तरीके दिखाऊंगा। आप जानेंगे कि value और selectedIndex में क्या अंतर है, चयन ईवेंट को कैसे संभालें, और मल्टी-सेलेक्ट के जाल में कैसे न फंसें। चलिए शुरू करते हैं!

\n\n

सबसे आसान तरीका: `value` प्रॉपर्टी

\n\n

मान लीजिए कि आपके पास एक सामान्य HTML सेलेक्ट है:

\n\n

<select id="city">\n  <option value="moscow">मॉस्को</option>\n  <option value="spb">सेंट पीटर्सबर्ग</option>\n  <option value="kazan">कज़ान</option>\n</select>

\n\n

चयनित मान प्राप्त करने के लिए, हमें केवल दो काम करने हैं:

\n\n

DOM में <select> एलिमेंट ढूंढें।
इसकी value प्रॉपर्टी पढ़ें।

\n\n

कोड में यह इस तरह दिखता है:

\n\n

const selectElement = document.getElementById('city');\nconst selectedValue = selectElement.value;\n\nconsole.log(selectedValue); // उदाहरण के लिए, "spb" आउटपुट होगा

\n\n

महत्वपूर्ण! <select> एलिमेंट की value प्रॉपर्टी स्वचालित रूप से वर्तमान में चयनित <option> के value एट्रीब्यूट को लौटाती है। यदि आपको केवल मान चाहिए, टेक्स्ट नहीं, तो यह सबसे सरल और अनुशंसित तरीका है।

\n\n

अगर चयनित आइटम का टेक्स्ट चाहिए तो?

\n\n

कभी-कभी हमें मान नहीं, बल्कि वह चाहिए जो उपयोगकर्ता देखता है (जैसे "moscow" के बजाय "मॉस्को")। इसके लिए चयनित ऑप्शन की textContent (या innerText) प्रॉपर्टी का उपयोग करें। लेकिन पहले हमें ऑप्शन प्राप्त करना होगा:

\n\n

const selectElement = document.getElementById('city');\nconst selectedOption = selectElement.options[selectElement.selectedIndex];\nconst selectedText = selectedOption.textContent;\n\nconsole.log(selectedText); // "मॉस्को" आउटपुट होगा

\n\n

यहां हम selectedIndex का उपयोग करते हैं - यह चयनित आइटम का इंडेक्स है (0 से शुरू)। फिर हम options कलेक्शन से संबंधित एलिमेंट लेते हैं।

\n\n

रीयल-टाइम में चयन बदलने पर कैसे प्रतिक्रिया दें?

\n\n

एक बार मान प्राप्त करना अच्छा है, लेकिन अक्सर जब उपयोगकर्ता चयन बदलता है तो हमें कुछ करने की आवश्यकता होती है। इसके लिए change ईवेंट का उपयोग करें:

\n\n

const selectElement = document.getElementById('city');\n\nselectElement.addEventListener('change', function() {\n  const selectedValue = selectElement.value;\n  const selectedText = selectElement.options[selectElement.selectedIndex].textContent;\n  \n  console.log('चयनित मान:', selectedValue);\n  console.log('चयनित टेक्स्ट:', selectedText);\n});

\n\n

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

\n\n

विशेष मामला: मल्टीपल सेलेक्ट (multiple select)

\n\n

क्या होगा यदि आपके पास एकाधिक चयन वाली ड्रॉपडाउन सूची है? उदाहरण के लिए:

\n\n

<select id="skills" multiple>\n  <option value="html">HTML</option>\n  <option value="css">CSS</option>\n  <option value="js">JavaScript</option>\n</select>

\n\n

इस मामले में, selectElement.value केवल पहला चयनित मान लौटाएगा, सभी नहीं। सभी चयनित आइटम प्राप्त करने के लिए, options कलेक्शन को लूप करें:

\n\n

const selectElement = document.getElementById('skills');\nconst selectedValues = [];\n\nfor (let i = 0; i < selectElement.options.length; i++) {\n  if (selectElement.options[i].selected) {\n    selectedValues.push(selectElement.options[i].value);\n  }\n}\n\nconsole.log(selectedValues); // उदाहरण के लिए, ["html", "js"]

\n\n

यह तरीका सुनिश्चित करता है कि आपको सभी चयनित मान मिलें, चाहे उपयोगकर्ता ने कितने भी विकल्प चुने हों।