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
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).
5 answers
solution1
48 ACCPTED 2011-02-21 17:46:21
Try:
alert(this.options[this.selectedIndex].text);
Demo:
<select onchange="alert(this.options[this.selectedIndex].text)"> <option>foo <option>bar <option>foobar </select>
solution2
3 2011-02-21 17:48:16
我还没有测试过，但这可能有效：
alert(this.options[this.selectedIndex].innerHTML)
solution3
3 2011-02-21 17:58:01
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
};
solution4
2 2011-02-21 17:53:33
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].textreturns 'test 1' -
document.getElementsByTagName('select')[0].options[0].innerHTMLreturns 'test 1' -
document.getElementsByTagName('select')[0].options[0].firstChildreturns a text node containing 'test 1' document.getElementsByTagName('select')[0].firstChild.nextSiblingreturns the first option node. Its first child is the text node 'test 1'
solution5
0 2020-06-19 18:04:27
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.
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.