Get selected option text with JavaScript

techtheatre picture techtheatre · Feb 20, 2013 · Viewed 328.9k times · Source

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.

Answer

999k picture 999k · Feb 20, 2013

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>