this.innerHTML的问题

老师，既然this.value可以取到当前选项的value值，为什么this.innerHTML不能取到当前选项的文本内容？必须要写成this.options[this.selectedIndex].innerHTML吗？

收起

2回答

小丸子爱吃菜 2017-11-15 09:35:52

var tex = this.innerHTML;
console.log(tex);

将tex打印出来后，发现获取到的是整个select的html，所以不能使用this.innerHTML；

祝学习愉快！

小丸子爱吃菜 2017-11-14 10:15:03

selectedIndex 属性可设置或返回下拉列表中被选选项的索引号。

可以将你写的代码粘贴过来，我们运行一下，看是什么问题！
祝学习愉快!

提问者 PuyuaN #1

<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title>onchange()</title> <style type="text/css"> #div{ width:300px; height:300px; border:2px solid gray; margin:100px 0 0 200px; } </style> <script type="text/javascript"> window.onload=function() { var btn=document.getElementById("color"); var btn2=document.getElementById("div"); btn.onchange=function() { var bgcolor=this.value;//也可以写成btn.options[btn.selectedIndex].value; var tex=this.innerHTML; if (bgcolor!=0) { btn2.style.backgroundColor=bgcolor; btn2.innerHTML="我的背景颜色变成了"+tex; } else { btn2.style.backgroundColor="white"; btn2.innerHTML="我没有发生任何变化"; } } } </script> </head> <body> <div> <span>请选择您喜欢的颜色:</span> <select id="color"> <option value="0">请选择</option> <option value="yellow">黄色</option> <option value="orange">橘色</option> <option value="pink">粉色</option> <option value="purple">紫色</option> </select> </div> <div id="div">我是div</div> </body> </html>

2017-11-14 20:26:27