जावास्क्रिप्ट का चयन कैसे करें बॉक्स के चयनित पाठ का चयन करें


79

यह चीजें पूरी तरह से काम करती हैं

<select name="selectbox" onchange="alert(this.value)">

लेकिन मैं पाठ का चयन करना चाहता हूं। मैंने इस तरह से कोशिश की

<select name="selectbox" onchange="alert(this.text)">

यह अपरिभाषित दिखाता है। मैंने पाया कि टेक्स्ट प्राप्त करने के लिए DOM का उपयोग कैसे किया जाता है। लेकिन मैं इसे इस तरह से करना चाहता हूं, मेरा मतलब है कि बस इस का उपयोग करना।

जवाबों:


126
this.options[this.selectedIndex].innerHTML

आपको चयनित आइटम के "प्रदर्शित" पाठ के साथ प्रदान करना चाहिए। this.value, जैसा आपने कहा, केवल valueविशेषता का मूल्य प्रदान करता है ।


6
मुझे यह पसंद नहीं है। हालांकि मुझे यकीन है कि यह वर्तमान ब्राउज़रों पर काम करता है, यह DOM एलिमेंट-आधारित कोड और पुराने-शैली फॉर्म हेरफेर कोड का एक अजीब मिश्रण है। वस्तुओं optionsकी एक सूची देता है Option, जो मुझे यकीन नहीं है कि <option>तत्वों के समान ही होने के लिए कहीं भी निर्दिष्ट हैं। textचयनित की समय-सम्मानित संपत्ति का उपयोग करने के लिए बेहतर है Option, जो काम करने की गारंटी है।
टिम डाउन

टिम, Optionऑब्जेक्ट्स ऑब्जेक्ट के समान HTMLOptionElementहैं। यदि आप उपयोग करने में आपत्ति करते हैं options, तो आप वैकल्पिक रूप से उपयोग कर सकते हैं childrenया childNodesइसके बजाय (यह ठीक से याद नहीं रख सकते हैं कि मुझे क्या लगता है कि वे दोनों काम करते हैं)
डेलन अजाबनी

1
मुझे लगता है कि आप थोड़ा गलत समझ रहे हैं: मैं पूरी तरह से उपयोग करने के पक्ष में हूं options, लेकिन Optionवस्तुएं वस्तुओं का अनुमान लगाती HTMLOptionElementहैं और ऐसा कोई विनिर्देश नहीं है जो मैंने देखा है कि यह अनिवार्य है Optionऔर HTMLOptionElementयह एक ही बात होनी चाहिए, भले ही वे ज्यादातर ब्राउज़रों में अच्छी तरह से हो जो दोनों का समर्थन करते हैं। मेरा कहना है कि यह दो शैलियों को मिलाने के लिए सुरक्षित नहीं होगा। इसलिए, मैं पसंद करूंगा this.options[this.selectedIndex].textया एक नोड-आधारित चीज पर आधारित हूं selectedIndex, जिसे IE में व्हॉट्सएप टेक्स्ट नोड्स को फ़िल्टर करने की आवश्यकता है।
टिम डाउन

यह बहुत अच्छी बात है। बस जिज्ञासा से बाहर, यदि आप विकल्प नोड्स के अंदर गैर-पाठ नोड्स है, करता है textवापसी innerHTML, या बस सभी पाठ नोड्स संयुक्त?
डेलन अजाबानी

1
Geez लोग, मतदान अक्षमता बंद करो! ओयड का सही उत्तर है। DOM की अवधारणा पर शोध करना कितना कठिन है? > __>
जॉन

68

चयनित आइटम का मूल्य प्राप्त करने के लिए आप निम्नलिखित कार्य कर सकते हैं:

this.options[this.selectedIndex].text

यहां optionsसेलेक्ट के अलग-अलग एक्सेस किए गए हैं, और SelectedIndexचुने हुए को चुनने के लिए इसका उपयोग किया जाता है, फिर इसे textएक्सेस किया जा रहा है।

डोम का चयन करने के बारे में यहाँ और पढ़ें ।


1
this.options[this.selectedIndex].valueबिल्कुल वैसा ही है this.value, क्षमा करें।
डेलन अजाबनी

जब मैं इस का उपयोग करता हूं। [this.electedIndex] .text त्रुटि कंसोल कहता है - त्रुटि: this.options [this.SelectedIndex] अपरिभाषित है
Aajahid

3
SHAKTI: ऐसा इसलिए है क्योंकि यह इसके selectedIndexबजाय है SelectedIndex
टिम डाउन

2
या, बस मज़े के लिए, this.selectedOptions[0].text(स्पष्ट एक्सटेंशन के साथ यदि आपके पास एक मल्टीसेलेक्ट है)।
रफिन


33

महज प्रयोग करें

$('#SelectBoxId option:selected').text(); सूचीबद्ध के रूप में पाठ प्राप्त करने के लिए

$('#SelectBoxId').val(); चयनित सूचकांक मान प्राप्त करने के लिए


2
जबकि यह पूरी तरह से jQuery के लिए काम करता है, ओपी केवल एक मूल टैग के रूप में जावास्क्रिप्ट सूचीबद्ध करता है। फिर भी, +1 क्योंकि बहुत से लोग jQuery का उपयोग करते हैं।
सेबलफॉस्ट

1

मुझे पता है कि कोई भी यहां jQuery समाधान के लिए नहीं पूछ रहा है, लेकिन यह ध्यान देने योग्य है कि jQuery के साथ आप बस इसके लिए पूछ सकते हैं:$('#selectorid').val()


0

यदि आप मान प्राप्त करना चाहते हैं, तो आप इस कोड को id = "selectBox" वाले चुनिंदा तत्व के लिए उपयोग कर सकते हैं

let myValue = document.querySelector("#selectBox").value;

यदि आप पाठ प्राप्त करना चाहते हैं, तो आप इस कोड का उपयोग कर सकते हैं

var sel = document.getElementById("selectBox");
var text= sel.options[sel.selectedIndex].text;
हमारी साइट का प्रयोग करके, आप स्वीकार करते हैं कि आपने हमारी Cookie Policy और निजता नीति को पढ़ और समझा लिया है।
Licensed under cc by-sa 3.0 with attribution required.