Skip to content Skip to sidebar Skip to footer
Home / Dom / Javascript

Get Inner Html Of The Selected Option

Post a Comment
I have something like this: select = document.getElementById('select'); select.onchange = function(){ alert(this.value); //returns the selected value alert(this.innerHTML); //r

Solution 1:

Try: 

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

Demo:

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

Solution 2:

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

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

Solution 3:

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

Solution 4:

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'

Solution 5:

I would recommend using this snippet:

alert(this.selectedOptions[0].text)

Demo:

<selectonchange="alert(this.selectedOptions[0].text)"><optionvalue="1">one</option><optionvalue="2">two</option><optionvalue="3">three</option></select>

The selectedOptions is an HTML collection which contains all selected options. Using this snippet gives more advantage than this.options[this.selectedIndex] when you are using multi-select. In the case of a multi-select dropdown, this.selectedOptionswill contain all selected elements. You can iterate through this collection to get innerHTML of all selected items.

Post a Comment for "Get Inner Html Of The Selected Option"