Get selected text using JavaScript

Question

I have a drop down list:

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

How can I get the actual text of the option and not the value using JavaScript? I can get the value with something like:

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

But instead of 7122 I want cat .

Answer 1

Try the options

 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> 

Answer 2

Plain javascript

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

JQuery

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

Answer 3

HTML:

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

JavaScript:

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

DEMO: http://jsfiddle.net/6dkun/1/

Answer 4

All these functions and random things, I think it’s best to use this and do it like this:

 this.options[this.selectedIndex].text 

Answer 5

Use -

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

Here is the fiddle - http://jsfiddle.net/eEGr3/

Answer 6

You need to get the innerHTML option, not its value.

Use this.innerHTML instead of this.selectedIndex .

Edit: you need to get the option element first and then use innerHTML.

Use this.text instead of this.selectedIndex .

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 

But:

  <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" 

And also this:

  <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

Try the following:

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

See here jsfiddle sample