Menu
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).
843
The Element property innerHTML gets or sets the HTML or XML markup contained within the element. To insert the HTML into the document rather than replace the contents of an element, use the method insertAdjacentHTML() .
innerText returns all text contained by an element and all its child elements. innerHtml returns all text, including html tags, that is contained by an element.
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'
39
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
