Get inner html of the selected option

This will work.

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
    var options = this.getElementsByTagName("option");
    var optionHTML = options[this.selectedIndex].innerHTML;  
    alert(optionHTML); //this is what I want, but it works now
};

Try: 

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

Demo:

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

After doing some research it appears as though the browser (Chrome anyway) will strip out tags from option values making it impossible to get the actual HTML code. For example, given the following HTML:

<html>
  <body>
    <select>
      <option><b>test 1</b></option>
      <option><b>test 2</b></option>
    </select>
  </body>
</html>
  • document.getElementsByTagName('select')[0].options[0].text returns 'test 1'
  • document.getElementsByTagName('select')[0].options[0].innerHTML returns 'test 1'
  • document.getElementsByTagName('select')[0].options[0].firstChild returns a text node containing 'test 1'
  • document.getElementsByTagName('select')[0].firstChild.nextSibling returns the first option node. Its first child is the text node 'test 1'

I haven't tested it, but this might work: 

alert(this.options[this.selectedIndex].innerHTML)

Tags:

Javascript

Dom

Recent Posts