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.

possible duplicate of How to get the selected value of dropdownlist using JavaScript? -- despite the title, it answers your question. — Felix Kling
– Felix Kling, Commented Feb 20, 2013 at 9:39
Possible duplicate of Retrieving the text of the selected <option> in <select> element — totymedli
– totymedli, Commented Jan 11, 2017 at 23:11

j08691 · Accepted Answer · 2018-09-13 19:13:57Z

449

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, 2018 at 19:13

j08691

208k33 gold badges269 silver badges281 bronze badges

answered Feb 20, 2013 at 9:42

999k

6,6452 gold badges31 silver badges32 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

Mirror318 Over a year ago

First rule when trying to use regex—keep searching Stack Overflow until you see the solution that doesn't need regex—cheers :)

Simon Baars Over a year ago

It's more clean to write onchange without a capital c

Nitrodist Over a year ago

Where's the multiple HTML select tag scenario?

Neonit Over a year ago

I would say today's preferred way is to use selectedOptions. That also solves @Nitrodist 's problem.

mplungjan · Accepted Answer · 2013-02-20 09:45:29Z

203

Plain JavaScript

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

jQuery:

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

edited Feb 20, 2013 at 9:45

mplungjan

180k29 gold badges183 silver badges246 bronze badges

answered Feb 20, 2013 at 9:38

sasi

4,3784 gold badges30 silver badges48 bronze badges

3 Comments

VisioN Over a year ago

@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 Over a year ago

@mplungjan It is not innerHTML, innerText is even worse.

mplungjan Over a year ago

I see option: { get: function( elem ) { var val = elem.attributes.value; return !val || val.specified ? elem.value : elem.text;} in 1.9

xgqfrms · Accepted Answer · 2020-03-01 17:35:56Z

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>

klidifia · Accepted Answer · 2014-09-09 21:32:19Z

25

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 9, 2014 at 21:32

klidifia

1,5051 gold badge13 silver badges18 bronze badges

Comments

VisioN · Accepted Answer · 2013-02-20 09:45:41Z

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, 2013 at 9:45

answered Feb 20, 2013 at 9:38

VisioN

146k35 gold badges287 silver badges291 bronze badges

2 Comments

mplungjan Over a year ago

see this comment I removed our conversation since you fixed your code

Davesexcel Over a year ago

Nice one, I spent several hours trying to find this answer.

Ashwin · Accepted Answer · 2013-02-20 09:37:47Z

7

Use -

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

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

answered Feb 20, 2013 at 9:37

Ashwin

12.5k22 gold badges87 silver badges119 bronze badges

1 Comment

mplungjan Over a year ago

Where does the question mention jQuery?

David · Accepted Answer · 2022-09-30 20:27:48Z

7

ECMAScript 6+

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

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

answered Sep 30, 2022 at 20:27

David

711 silver badge1 bronze badge

Comments

Md Masud · Accepted Answer · 2021-11-08 13:13:04Z

5

Using jquery.
In your event

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

answered Nov 8, 2021 at 13:13

Md Masud

2,7511 gold badge24 silver badges16 bronze badges

Comments

Ali · Accepted Answer · 2022-05-16 13:34:20Z

5

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, 2022 at 13:34

Ali

8311 gold badge6 silver badges25 bronze badges

answered Aug 17, 2020 at 23:12

Moamber Raza

672 silver badges3 bronze badges

2 Comments

Jason Aller Over a year ago

Did you mean to say Java, or JavaScript?

Lewis Morris Over a year ago

needs to have e.currentTarget.selectedIndex in there i.e e.currentTarget.options[e.currentTarget.selectedIndex]

Marco Mesen · Accepted Answer · 2021-06-12 03:04:43Z

4

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, 2021 at 3:04

Marco Mesen

6856 silver badges13 bronze badges

Comments

John · Accepted Answer · 2021-12-08 14:27:57Z

3

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 8, 2021 at 14:27

John

5791 gold badge3 silver badges16 bronze badges

answered Dec 8, 2021 at 7:08

Absar Ahmad

311 bronze badge

1 Comment

Community Over a year ago

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.

sankiago · Accepted Answer · 2021-08-22 00:42:54Z

2

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

answered Aug 22, 2021 at 0:42

sankiago

10911 bronze badges

Comments

Muhammet Ayhan · Accepted Answer · 2022-04-21 13:21:58Z

2

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

answered Apr 21, 2022 at 13:21

Muhammet Ayhan

211 bronze badge

1 Comment

Community Over a year ago

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.

pbain · Accepted Answer · 2024-07-13 13:51:26Z

2

By using addEventListener(), we can get option's text, value, attribute.

<select id="box1">
      <option value="98">dog</option>
      <option value="7122">cat</option>
      <option value="142" size="small">bird</option> //Added extra attribute for attribute example
</select>

By "JavaScript":

let selectText = document.getElementById("box1");

selectText.addEventListener("change", (event) => {
console.log(selectText.options[selectText.selectedIndex].text);

//console.log(selectText.options[selectText.selectedIndex].value);

//selectText.options[selectText.selectedIndex].getAttribute("size")); //small

});

edited Jul 13, 2024 at 13:51

answered Jul 13, 2024 at 13:49

pbain

236 bronze badges

Comments

Nick Pickering · Accepted Answer · 2013-02-20 09:49:16Z

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, 2013 at 9:49

answered Feb 20, 2013 at 9:37

Nick Pickering

3,2053 gold badges32 silver badges50 bronze badges

1 Comment

VisioN Over a year ago

This is wrong. It will grap the innerHTML of <select> element.

Jean-Dadet Diasoluka · Accepted Answer · 2018-12-04 18:48:00Z

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

ericosg · Accepted Answer · 2013-02-20 09:43:09Z

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, 2013 at 9:43

ericosg

4,9574 gold badges41 silver badges59 bronze badges

7 Comments

mplungjan Over a year ago

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

Nick Pickering Over a year ago

Eh, I think it might be better/faster but I'd like to hear @mplungjan's rebuttal.

mplungjan Over a year ago

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

Nick Pickering Over a year ago

innerHTML is so convenient though... I'm willing to sacrifice all of the standards and simplicity for that. :P

ericosg Over a year ago

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.

|

Collectives™ on Stack Overflow

Get selected option text with JavaScript

17 Answers 17

4 Comments

3 Comments

There are two solutions, as far as I know.

1 selectedOptions

2 options

Comments

Comments

2 Comments

1 Comment

Comments

Comments

2 Comments

Comments

1 Comment

Comments

1 Comment

Comments

1 Comment

Comments

7 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

17 Answers 17

4 Comments

3 Comments

There are two solutions, as far as I know.

1 selectedOptions

2 options

Comments

Comments

2 Comments

1 Comment

Comments

Comments

2 Comments

Comments

1 Comment

Comments

1 Comment

Comments

1 Comment

Comments

7 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related