Get selected option text with JavaScript

Question

I have a dropdown list like this:

<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 option text rather than the value using JavaScript? I can get the value with something like:

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

But rather than 7122 I want cat.

http://stackoverflow.com/a/1085810/1339473 see this for more help — QuokMoon, Feb 20 '13 at 09:38
possible duplicate of [How to get the selected value of dropdownlist using JavaScript?](http://stackoverflow.com/questions/1085801/how-to-get-the-selected-value-of-dropdownlist-using-javascript) -- despite the title, it answers your question. — Felix Kling, Feb 20 '13 at 09:39

score 414 · Accepted Answer · edited Sep 13 '18 at 19:13

414

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>

edited Sep 13 '18 at 19:13

j08691

204,283
31
260
272

answered Feb 20 '13 at 09:42

999k

6,257
2
29
32

68

First rule when trying to use regex—keep searching Stack Overflow until you see the solution that doesn't need regex—cheers :) – Mirror318 Oct 03 '17 at 00:57
5

It's more clean to write onchange without a capital c – Simon Baars Mar 11 '18 at 14:09
1

Where's the `multiple` HTML select tag scenario? – Nitrodist Mar 25 '21 at 02:59
1

I would say today's preferred way is to use [`selectedOptions`](https://developer.mozilla.org/en-US/docs/Web/API/HTMLSelectElement/selectedOptions). That also solves @Nitrodist 's problem. – Neonit May 08 '21 at 16:06

score 190 · Answer 2 · edited Feb 20 '13 at 09:45

190

Plain JavaScript

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

jQuery:

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

edited Feb 20 '13 at 09:45

mplungjan

169,008
28
173
236

answered Feb 20 '13 at 09:38

sasi

4,192
4
28
47

2

@mplungjan Why don't you comment here that jQuery uses `.textContent` and `.innerText` for `.text()` method operation? It is not by standards, it is totally wrong because it doesn't use `.text`. Where are the downvotes? – VisioN Feb 20 '13 at 10:11
@mplungjan It is not `innerHTML`, `innerText` is even worse. – VisioN Feb 20 '13 at 10:16
I see option: { get: function( elem ) { var val = elem.attributes.value; return !val || val.specified ? elem.value : elem.text;} in 1.9 – mplungjan Feb 20 '13 at 10:24
jquery code worked fine for me, thanks – Flowra Jun 02 '22 at 08:35

xgqfrms · Answer 3 · 2020-03-01T17:35:56.433

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>

2 options

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

score 22 · Answer 4 · answered Sep 09 '14 at 21:32

22

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

this.options[this.selectedIndex].text

answered Sep 09 '14 at 21:32

klidifia

1,415
1
12
18

VisioN · Answer 5 · 2013-02-20T09:45:41.423

17

HTML:

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

JavaScript:

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

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

edited Feb 20 '13 at 09:45

answered Feb 20 '13 at 09:38

VisioN

143,310
32
282
281

see [this comment](http://stackoverflow.com/questions/14976495/get-selected-option-text-with-javascript/14976657#comment21029956_14976657) I removed our conversation since you fixed your code – mplungjan Feb 20 '13 at 09:53
Nice one, I spent several hours trying to find this answer. – Davesexcel Aug 19 '23 at 11:08

score 7 · Answer 6 · answered Feb 20 '13 at 09:37

7

Use -

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

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

answered Feb 20 '13 at 09:37

Ashwin

12,081
22
83
117

11

Where does the question mention jQuery? – mplungjan Feb 20 '13 at 09:40

score 4 · Answer 7 · edited May 16 '22 at 13:34

4

Using vanilla JavaScript

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

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

edited May 16 '22 at 13:34

Ali

761
1
5
24

answered Aug 17 '20 at 23:12

Syed Moamber Raza

49
1
3

Did you mean to say Java, or JavaScript? – Jason Aller Aug 17 '20 at 23:34
needs to have `e.currentTarget.selectedIndex` in there i.e `e.currentTarget.options[e.currentTarget.selectedIndex]` – Lewis Morris Oct 21 '22 at 21:20

score 4 · Answer 8 · answered Sep 30 '22 at 20:27

4

ECMAScript 6+

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

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

answered Sep 30 '22 at 20:27

David

41
1

score 3 · Answer 9 · answered Jun 12 '21 at 03:04

3

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...
  };

answered Jun 12 '21 at 03:04

Marco Mesen

653
6
12

score 3 · Answer 10 · answered Nov 08 '21 at 13:13

3

Using jquery.
In your event

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

answered Nov 08 '21 at 13:13

infomasud

2,263
1
18
12

score 2 · Answer 11 · edited Dec 08 '21 at 14:27

2

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>

edited Dec 08 '21 at 14:27

John

578
1
3
15

answered Dec 08 '21 at 07:08

Absar Ahmad

21
1

1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Dec 08 '21 at 08:21

Nick Pickering · Answer 12 · 2013-02-20T09:49:16.137

1

~~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.

edited Feb 20 '13 at 09:49

answered Feb 20 '13 at 09:37

Nick Pickering

3,095
3
29
50

This is wrong. It will grap the `innerHTML` of ` – VisioN Feb 20 '13 at 09:39

score 1 · Answer 13 · answered Dec 04 '18 at 18:48

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

score 1 · Answer 14 · answered Aug 22 '21 at 00:42

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

score 1 · Answer 15 · answered Apr 21 '22 at 13:21

1

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

answered Apr 21 '22 at 13:21

Muhammet Ayhan

11
1

As it’s currently written, your answer is unclear. Please [edit] to add additional details that will help others understand how this addresses the question asked. You can find more information on how to write good answers [in the help center](/help/how-to-answer). – Community Apr 21 '22 at 17:21

score 0 · Answer 16 · answered Feb 20 '13 at 09:43

0

Try the below:

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

See here jsfiddle sample

answered Feb 20 '13 at 09:43

ericosg

4,926
4
37
59

1

Why is everybody insisting on innerHTML??? Use .text ! And why pass all that stuff to the function. Just pass (this) and have the function decide what to use – mplungjan Feb 20 '13 at 09:46
Eh, I think it might be better/faster but I'd like to hear @mplungjan's rebuttal. – Nick Pickering Feb 20 '13 at 09:51
1

innerHTML is a convenience method invented by Microsoft. It was then copied to more browsers, but since a) it is not standard and b) you cannot have html in an option there is absolutely no need to confuse the issue when an option has .value and .text – mplungjan Feb 20 '13 at 09:51
`innerHTML` is so convenient though... I'm willing to sacrifice all of the standards and simplicity for that. :P – Nick Pickering Feb 20 '13 at 10:03
1

personally I use .text() with jQuery and .innerHTML with pure JS and helps me avoiding mistakes when mixmatching frameworks, only by habit. I know innerHTML works in all browsers and that makes me happy :) oh and I specified both function parameters so that the OP can relate easier to my solution, no other reason. – ericosg Feb 20 '13 at 10:14
.text works in more browsers than innerHTML and I find it confusing that you would use innerHTML to get the text of something that cannot have HTML in it – mplungjan Feb 20 '13 at 10:25
I do not know where you get your facts, but innerHTML support is fine by only a single exception "In IE and Konqueror innerHTML does not work correctly when you update tables". It's faster but I agree to .text for something that has no HTML in it. – ericosg Feb 20 '13 at 11:33

Get selected option text with JavaScript

16 Answers16

There are two solutions, as far as I know.

1 selectedOptions

2 options

Linked

Related