老师,请问如何正确获取option里的文字?

来源：3-12 编程练习

慕无忌5206817

2019-11-03 18:10:46

<!DOCTYPE html>
<html>
    <head>
    <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 color=document.getElementById("color"),
           div=document.getElementById("div"),
           opt=document.getElementsByTagName("option");

           color.onchange=function (){
               if(this.value!=0){
                   div.style.background=this.value;
                   div.innerHTML="我的背景颜色变成了"+opt.innerHTML;
               }else{
                   div.style.background="white";
                   div.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>

写回答

1回答