javascript - Get inner html of the selected option

Question

I have something like this:

select = document.getElementById("select");
select.onchange = function(){
  alert(this.value); //returns the selected value
  alert(this.innerHTML); //returns the entire select with all the options
  alert(this.selected.innerHTML); //this is what I want, but doesn't work, of course
};

How can I get the innerHTML of the selected option in pure js? (no frameworks).

Answer 1

Try:

alert(this.options[this.selectedIndex].text);

Demo:

<select onchange="alert(this.options[this.selectedIndex].text)">
  <option>foo
  <option>bar
  <option>foobar
</select>