जावास्क्रिप्ट के साथ चयनित विकल्प पाठ प्राप्त करें

Question

मेरे पास इस तरह की एक लटकती सूची है:

<select id="box1">
<option value="98">dog</option>
<option value="7122">cat</option>
<option value="142">bird</option>
</select>

मैं जावास्क्रिप्ट का उपयोग करने के बजाय वास्तविक विकल्प पाठ कैसे प्राप्त कर सकता हूं? मैं कुछ के साथ मूल्य प्राप्त कर सकते हैं जैसे:

<select id="box1" onChange="myNewFunction(this.selectedIndex);" >

लेकिन इसके बजाय 7122मुझे चाहिए cat।

Comments

stackoverflow.com/a/1085810/1339473 इसे और अधिक मदद के लिए देखें

— QuokMoon

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

— फेलिक्स क्लिंग

चयनित <विकल्प> के तत्व को <select> तत्व

— totymedli

Answer 1

विकल्पों का प्रयास करें

function myNewFunction(sel) {
  alert(sel.options[sel.selectedIndex].text);
}

<select id="box1" onChange="myNewFunction(this);">
  <option value="98">dog</option>
  <option value="7122">cat</option>
  <option value="142">bird</option>
</select>

Comments

रेगेक्स का उपयोग करने की कोशिश करते समय पहला नियम - स्टैक ओवरफ्लो को तब तक खोजते रहें जब तक कि आपको समाधान न दिख जाए, जिसे रेगेक्स की आवश्यकता नहीं है

— मिरर -318

एक राजधानी सी के बिना onchange लिखने के लिए यह अधिक साफ है

— शमौन बार

Answer 2

सादा जावास्क्रिप्ट

var sel = document.getElementById("box1");
var text= sel.options[sel.selectedIndex].text;

jQuery:

$("#box1 option:selected").text();

Comments

@mplungjan तुम यहाँ क्यों टिप्पणी नहीं करते कि jQuery का उपयोग करता है .textContentऔर .innerTextके लिए .text()विधि आपरेशन? यह मानकों द्वारा नहीं है, यह पूरी तरह से गलत है क्योंकि यह उपयोग नहीं करता है .text। कहां हैं डाउनवोट्स?

— VisioN

भीतर का HTML कहां है?

— mplungjan

@mplungjan ऐसा नहीं है innerHTML, innerTextऔर भी बदतर है।

— VisioN

मुझे विकल्प दिखाई देता है: {get: function (elem) {var val = elem.attributes.value; वापसी! वाल || val.specified? elem.value: elem.text;} 1.9 में

— mplungjan

Answer 3

इन सभी कार्यों और यादृच्छिक चीजों, मुझे लगता है कि इसका उपयोग करना सबसे अच्छा है, और इसे इस तरह से करना है:

this.options[this.selectedIndex].text

Answer 4

HTML:

<select id="box1" onChange="myNewFunction(this);">

जावास्क्रिप्ट:

function myNewFunction(element) {
    var text = element.options[element.selectedIndex].text;
    // ...
}

डेमो: http://jsfiddle.net/6dkun/1/

Comments

देखना यह टिप्पणी मैं हमारी बातचीत हटा दिया, क्योंकि आप अपने कोड तय

— mplungjan

Answer 5

उपयोग -

$.trim($("select").children("option:selected").text())   //cat

यहाँ फिडेल है - http://jsfiddle.net/eEGr3/

Comments

प्रश्न jQuery का उल्लेख कहां करता है?

— mplungjan

Answer 6

आपको विकल्प का आंतरिक HTML प्राप्त करना होगा, न कि उसका मूल्य।

के this.innerHTMLबजाय का उपयोग करें this.selectedIndex।

संपादित करें: आपको पहले विकल्प तत्व प्राप्त करने की आवश्यकता होगी और फिर आंतरिक HTML का उपयोग करना होगा।

के this.textबजाय का उपयोग करें this.selectedIndex।

Comments

ये गलत है। यह तत्व innerHTMLका अंगूर होगा <select>।

— VisioN

Answer 7

 <select class="cS" onChange="fSel2(this.value);">
     <option value="0">S?lectionner</option>
     <option value="1">Un</option>
     <option value="2" selected>Deux</option>
     <option value="3">Trois</option>
 </select>

 <select id="iS1" onChange="fSel(options[this.selectedIndex].value);">
     <option value="0">S?lectionner</option>
     <option value="1">Un</option>
     <option value="2" selected>Deux</option>
     <option value="3">Trois</option>
 </select><br>

 <select id="iS2" onChange="fSel3(options[this.selectedIndex].text);">
     <option value="0">S?lectionner</option>
     <option value="1">Un</option>
     <option value="2" selected>Deux</option>
     <option value="3">Trois</option>
 </select>

 <select id="iS3" onChange="fSel3(options[this.selectedIndex].textContent);">
     <option value="0">S?lectionner</option>
     <option value="1">Un</option>
     <option value="2" selected>Deux</option>
     <option value="3">Trois</option>
 </select>

 <select id="iS4" onChange="fSel3(options[this.selectedIndex].label);">
     <option value="0">S?lectionner</option>
     <option value="1">Un</option>
     <option value="2" selected>Deux</option>
     <option value="3">Trois</option>
 </select>

 <select id="iS4" onChange="fSel3(options[this.selectedIndex].innerHTML);">
     <option value="0">S?lectionner</option>
     <option value="1">Un</option>
     <option value="2" selected>Deux</option>
     <option value="3">Trois</option>
 </select>

 <script type="text/javascript"> "use strict";
   const s=document.querySelector(".cS");

 // options[this.selectedIndex].value
 let fSel = (sIdx) => console.log(sIdx,
     s.options[sIdx].text, s.options[sIdx].textContent, s.options[sIdx].label);

 let fSel2= (sIdx) => { // this.value
     console.log(sIdx, s.options[sIdx].text,
         s.options[sIdx].textContent, s.options[sIdx].label);
 }

 // options[this.selectedIndex].text
 // options[this.selectedIndex].textContent
 // options[this.selectedIndex].label
 // options[this.selectedIndex].innerHTML
 let fSel3= (sIdx) => {
     console.log(sIdx);
 }
 </script> // fSel

परंतु :

 <script type="text/javascript"> "use strict";
    const x=document.querySelector(".cS"),
          o=x.options, i=x.selectedIndex;
    console.log(o[i].value,
                o[i].text , o[i].textContent , o[i].label , o[i].innerHTML);
 </script> // .cS"

और यह भी:

 <select id="iSel" size="3">
     <option value="one">Un</option>
     <option value="two">Deux</option>
     <option value="three">Trois</option>
 </select>


 <script type="text/javascript"> "use strict";
    const i=document.getElementById("iSel");
    for(let k=0;k<i.length;k++) {
        if(k == i.selectedIndex) console.log("Selected ".repeat(3));
        console.log(`${Object.entries(i.options)[k][1].value}`+
                    ` => ` +
                    `${Object.entries(i.options)[k][1].innerHTML}`);
        console.log(Object.values(i.options)[k].value ,
                    " => ",
                    Object.values(i.options)[k].innerHTML);
        console.log("=".repeat(25));
    }
 </script>

Answer 8

जहाँ तक मुझे पता है, दो समाधान हैं।

दोनों कि बस वेनिला जावास्क्रिप्ट का उपयोग करने की जरूरत है

1 चयनित

लाइव डेमो

const log = console.log;
const areaSelect = document.querySelector(`[id="area"]`);

areaSelect.addEventListener(`change`, (e) => {
  // log(`e.target`, e.target);
  const select = e.target;
  const value = select.value;
  const desc = select.selectedOptions[0].text;
  log(`option desc`, desc);
});

<div class="select-box clearfix">
  <label for="area">Area</label>
  <select id="area">
    <option value="101">A1</option>
    <option value="102">B2</option>
    <option value="103">C3</option>
  </select>
</div>

2 विकल्प

लाइव डेमो

const log = console.log;
const areaSelect = document.querySelector(`[id="area"]`);

areaSelect.addEventListener(`change`, (e) => {
  // log(`e.target`, e.target);
  const select = e.target;
  const value = select.value;
  const desc = select.options[select.selectedIndex].text;
  log(`option desc`, desc);
});

<div class="select-box clearfix">
  <label for="area">Area</label>
  <select id="area">
    <option value="101">A1</option>
    <option value="102">B2</option>
    <option value="103">C3</option>
  </select>
</div>

---

Answer 9

नीचे आज़माएं:

myNewFunction = function(id, index) {
    var selection = document.getElementById(id);
    alert(selection.options[index].innerHTML);
};

यहाँ देखें jsfiddle नमूना

Comments

हर कोई आंतरिक HTML पर जोर क्यों दे रहा है ??? .Text का उपयोग करें! और फंक्शन में वह सब सामान क्यों पास करें। बस पास (यह) और फ़ंक्शन का उपयोग करने का निर्णय लेना है

— mplungjan

एह, मुझे लगता है कि यह बेहतर / तेज हो सकता है लेकिन मैं @ mplungjan का खंडन सुनना चाहूंगा।

— निक पिकरिंग

इनरबाॅल माइक्रोसॉफ्ट द्वारा ईजाद की गई एक सुविधा पद्धति है। तब इसे और अधिक ब्राउज़रों में कॉपी किया गया था, लेकिन चूंकि a) यह मानक नहीं है और b) आपके पास विकल्प में html नहीं हो सकता है, जब विकल्प में

— .value

innerHTMLहालांकि यह बहुत सुविधाजनक है ... मैं इसके लिए सभी मानकों और सादगी का त्याग करने को तैयार हूं। : पी

— निक पिकरिंग

व्यक्तिगत रूप से मैं शुद्ध जेएस के साथ jQuery और .innerHTML के साथ .text () का उपयोग करता हूं और मुझे आदत से बचने के दौरान गलतियों से बचने में मदद करता है, केवल आदत से। मुझे पता है कि इनरएचटीएमएल सभी ब्राउज़रों में काम करता है और इससे मुझे खुशी होती है :) ओह और मैंने दोनों फ़ंक्शन मापदंडों को निर्दिष्ट किया ताकि ओपी मेरे समाधान से आसानी से संबंधित हो सके, कोई अन्य कारण नहीं।

— ericosg