Get inner html of the selected option_问答_开发者

开发者 https://www.devze.com 2023-02-12 16:06 出处：网络

I have something like this: select = document.getElementById(\"select\"); select.onchange = function(){

相关专题：dom javascript

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开发者_如何学JAVA); //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).

Try:

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

Demo:

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

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

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

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
};

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 would recommend using this snippet:

alert(this.selectedOptions[0].text)

Demo:

<select onchange="alert(this.selectedOptions[0].text)">
  <option value="1">one</option>
  <option value="2">two</option>
  <option value="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.selectedOptions will contain all selected elements. You can iterate through this collection to get innerHTML of all selected items.