jQuery: ड्रॉपडाउन सूची (select) से टेक्स्ट कैसे प्राप्त करें — पूर्ण विश्लेषण

क्या आपने कभी सोचा है: "मुझे value क्यों मिल रही है, जबकि मुझे टेक्स्ट चाहिए?"

PythonLib में आपका स्वागत है! आज हम एक सबसे लोकप्रिय समस्या का विश्लेषण करेंगे, जिसका सामना शुरुआती और अनुभवी फ्रंटएंड डेवलपर्स दोनों करते हैं। आप एक सुंदर फॉर्म बनाते हैं, एक ड्रॉपडाउन सूची (select box) जोड़ते हैं, jQuery पर एक हैंडलर लिखते हैं... और अचानक आपको पता चलता है कि आपको value (देश का संख्यात्मक कोड, उत्पाद ID या ऐसा कुछ) नहीं, बल्कि मानव-पठनीय टेक्स्ट चाहिए जो उपयोगकर्ता मेनू में देखता है।

Stack Overflow पर इस प्रश्न ने हजारों व्यूज़ और दर्जनों उत्तर एकत्र किए हैं। हम उनमें से एक को कॉपी नहीं करेंगे — हम कार्य को चरणबद्ध तरीके से समझाएंगे, समाधान के कई तरीके दिखाएंगे और तैयार कोड देंगे जिसे आप अभी अपने प्रोजेक्ट में डाल सकते हैं। चलिए शुरू करते हैं!

समस्या: value बनाम text

एक सामान्य HTML कोड की कल्पना करें:

<select id="citySelect">\n    <option value="1">मॉस्को</option>\n    <option value="2">सेंट पीटर्सबर्ग</option>\n    <option value="3">नोवोसिबिर्स्क</option>\n</select>

जब उपयोगकर्ता "सेंट पीटर्सबर्ग" चुनता है, तो मानक jQuery कोड $('#citySelect').val() "2" लौटाएगा। लेकिन क्या होगा यदि आपको पेज पर "सेंट पीटर्सबर्ग" प्रदर्शित करना है? या विश्लेषण के लिए पठनीय नाम भेजना है? यहीं पर DOM-नेविगेशन का जादू शुरू होता है।

समाधान #1: .text() के साथ क्लासिक दृष्टिकोण

सबसे सरल और सहज तरीका — चयनित <option> तत्व प्राप्त करें, फिर उसकी टेक्स्ट सामग्री निकालें।

$('#citySelect').on('change', function() {\n    var selectedText = $(this).find('option:selected').text();\n    console.log('आपने चुना:', selectedText);\n});

यह कैसे काम करता है?
\n$(this) — हमारे select का संदर्भ (इवेंट हैंडलर के अंदर)।
\n.find('option:selected') — चाइल्ड option में से वह खोजें जिसमें selected विशेषता हो।
\n.text() — शुद्ध टेक्स्ट निकालें (HTML टैग के बिना)।

बोनस: यदि आपके पेज पर कई select हैं, तो this के बजाय क्लास या ID का उपयोग करें।

समाधान #2: .children() और .filter() का उपयोग करें

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

$('#citySelect').on('change', function() {\n    var selectedText = $(this).children('option:selected').text();\n    // filter के साथ विकल्प:\n    // var selectedText = $(this).children('option').filter(':selected').text();\n    alert('चयनित शहर: ' + selectedText);\n});

find() और children() के बीच अंतर यह है कि children() केवल सीधे वंशजों को देखता है, जबकि find() किसी भी स्तर के सभी वंशजों को देखता है। मानक select के लिए इससे कोई फर्क नहीं पड़ता, लेकिन जानना उपयोगी है।

समाधान #3: पेज लोड होने पर टेक्स्ट प्राप्त करें

अक्सर change इवेंट की प्रतीक्षा किए बिना, तुरंत चयनित टेक्स्ट दिखाने की आवश्यकता होती है। उदाहरण के लिए, फॉर्म को इनिशियलाइज़ करते समय।

$(document).ready(function() {\n    var initialText = $('#citySelect option:selected').text();\n    $('#selectedCityDisplay').text('वर्तमान शहर: ' + initialText);\n});

यह कोड DOM लोड होने पर एक बार चलेगा और डिफ़ॉल्ट रूप से चयनित option का टेक्स्ट selectedCityDisplay ID वाले तत्व में लिखेगा।

समाधान #4: सार्वभौमिक सहायक फ़ंक्शन

यदि आप एक गंभीर एप्लिकेशन लिख रहे हैं, तो तर्क को एक अलग फ़ंक्शन में निकालना समझदारी है। इससे कोड साफ और पुन: प्रयोज्य हो जाएगा।

function getSelectedText(selectId) {\n    return $('#' + selectId + ' option:selected').text();\n}\n\n// उपयोग:\n$('#citySelect').on('change', function() {\n    var text = getSelectedText('citySelect');\n    co