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
  a         


        

Answer 1

I would recommend using this snippet:

alert(this.selectedOptions[0].text)

Demo:

  one
  two
  three

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.selectedOptions will contain all selected elements. You can iterate through this collection to get innerHTML of all selected items.