जावास्क्रिप्ट में चुने गए ड्रॉपडाउन मानों को कुशलतापूर्वक प्राप्त करना

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

विषयवस्तु की तालिका

• विधि 1: selectedIndex का उपयोग करना
• विधि 2: value गुण के माध्यम से प्रत्यक्ष पहुँच
• विधि 3: गतिशील अपडेट के लिए इवेंट लिसनर
• त्रुटि संचालन और सर्वोत्तम प्रथाएँ

विधि 1: selectedIndex का उपयोग करना

यह विधि <select> तत्व के selectedIndex गुण का उपयोग करती है। यह गुण चयनित विकल्प के सूचकांक (शून्य-आधारित) को लौटाता है। हम इस सूचकांक का उपयोग विकल्प के मान तक पहुँचने के लिए कर सकते हैं।

<select id="mySelect">
  <option value="value1">विकल्प 1</option>
  <option value="value2">विकल्प 2</option>
  <option value="value3">विकल्प 3</option>
</select>

<script>
  const selectElement = document.getElementById("mySelect");
  const selectedIndex = selectElement.selectedIndex;
  const selectedValue = selectElement.options[selectedIndex]?.value; //नुल/अपरिभाषित सुरक्षा के लिए वैकल्पिक चेनिंग

  if (selectedIndex !== -1) {
    console.log("चयनित मान:", selectedValue);
  } else {
    console.log("कोई विकल्प चयनित नहीं है।");
  }
</script>

वैकल्पिक चेनिंग (?.) के उपयोग पर ध्यान दें जो उन मामलों को सुचारू रूप से संभालता है जहाँ कोई विकल्प चयनित नहीं है (selectedIndex -1 है), त्रुटियों को रोकता है।

विधि 2: value गुण के माध्यम से प्रत्यक्ष पहुँच

<select> तत्व में स्वयं एक value गुण होता है जो सीधे चयनित विकल्प के मान को दर्शाता है। यह आम तौर पर सबसे कुशल तरीका है।

<select id="mySelect">
  <option value="value1">विकल्प 1</option>
  <option value="value2">विकल्प 2</option>
  <option value="value3">विकल्प 3</option>
</select>

<script>
  const selectElement = document.getElementById("mySelect");
  const selectedValue = selectElement?.value; //मजबूती के लिए वैकल्पिक चेनिंग

  console.log("चयनित मान:", selectedValue);
</script>

विधि 3: गतिशील अपडेट के लिए इवेंट लिसनर

इंटरैक्टिव फॉर्म के लिए जहाँ चयन गतिशील रूप से बदलता है, change इवेंट को कैप्चर करने के लिए एक इवेंट लिसनर का उपयोग करें।

<select id="mySelect">
  <option value="value1">विकल्प 1</option>
  <option value="value2">विकल्प 2</option>
  <option value="value3">विकल्प 3</option>
</select>

<script>
  const selectElement = document.getElementById("mySelect");
  selectElement.addEventListener('change', function() {
    const selectedValue = this.value;
    console.log("चयनित मान:", selectedValue);
  });
</script>

त्रुटि संचालन और सर्वोत्तम प्रथाएँ

हमेशा त्रुटि संचालन शामिल करें। अप्रत्याशित त्रुटियों को रोकने के लिए इसके गुणों तक पहुँचने से पहले यह जांच लें कि तत्व मौजूद है या नहीं।

const selectElement = document.getElementById("mySelect");
if (selectElement) {
  const selectedValue = selectElement.value;
  console.log("चयनित मान:", selectedValue);
} else {
  console.error("ID 'mySelect' वाला चयन तत्व नहीं मिला!");
}

यह मजबूत दृष्टिकोण सुनिश्चित करता है कि आपकी स्क्रिप्ट संभावित समस्याओं को सुचारू रूप से संभालती है।