html - Get selected option text with JavaScript

Solution:

Try 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

Solution:

Plain JavaScript

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

jQuery:

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

Answer

Solution:

There are two solutions, as far as I know.

both that just need using vanilla javascript

1 selectedOptions

live demo

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>

Answer

Solution:

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

this.options[this.selectedIndex].text

Answer

Solution:

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

Solution:

Use -

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

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

Answer

Solution:

Using vanilla JavaScript

onChange = { e => e.currentTarget.options[e.selectedIndex].text }

will give you exact value if values are inside a loop.

Answer

Solution:

To get it on React with Typescript:

  const handleSelectChange: React.ChangeEventHandler<HTMLSelectElement> = (event) => {
    const {  options, selectedIndex } = event.target;
    const text = options[selectedIndex].text;
    // Do something...
  };

Answer

Solution:

Using jquery.
In your event

  let selText = $("#box1 option:selected").text();
  console.log(selText);

Answer

Solution:

ECMAScript 6+

const select = document.querySelector("#box1");

const { text } = [...select.options].find((option) => option.selected);

Answer

Solution:

function runCode() {
  var value = document.querySelector('#Country').value;
  window.alert(document.querySelector(`#Country option[value=${value}]`).innerText);
}

<select name="Country" id="Country">
   <option value="IN">India</option>
   <option value="GBR">United Kingdom </option>
   <option value="USA">United States </option>
   <option value="URY">Uruguay </option>
   <option value="UZB">Uzbekistan </option>
</select>

<button onclick="runCode()">Run</button>

Answer

Solution:

~~You'll need to get the innerHTML of the option, and not its value.~~

~~Use this.innerHTML instead of this.selectedIndex.~~

~~Edit: You'll need to get the option element first and then use innerHTML.~~

Use this.text instead of this.selectedIndex.

Answer

Solution:

 <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

Solution:

You can get an array-like object that contains the selected item(s) with the method getSelected() method. like this:

querySelector('#box1').getSelected()

so you can extract the text with the .textContent attribute. like this:

querySelector('#box1').getSelected()[0].textContent

If you have a multiple selection box you can loop through array-like object I hope it helps you😎👍

Answer

Solution:

var selectionlist=document.getElementById("agents"); td2.innerHTML = selectionlist.children[selectionlist.selectedIndex].innerHTML;

Answer

Solution:

Try the below:

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

See here jsfiddle sample

Source