老师检查一下

来源：4-3 编程练习

慕九州3859248

2019-11-17 14:59:02

<!DOCTYPE html>
<html>
   <head>
       <meta charset="UTF-8">
       <title></title>
       <style type="text/css">

       </style>
   </head>
   <body>
       <div id="main">
           <p>
               请选择菜单：
               <select id="menu">
                   <option title="qxz">请选择</option>
                   <option value="fruit" class="select" title="sg">水果</option>
                   <option value="cake" class="select" title="dg">蛋糕</option>
                   <option value="nuts" class="select" title="jg">坚果</option>
               </select>
           </p>
           <p>
               该系列有：<span class="content"></span>
           </p>
       </div>
       <script type="text/javascript">
           //1.获取元素
           var main=document.querySelector('#main');
           var menu=main.querySelector('#menu');
           var optionBtn=menu.querySelectorAll('.select');
           var content=menu.querySelector('.content');
           //2.绑定元素
           for(var i=0;i<optionBtn.length;i++){
               optionBtn[i].onclick=function(){}
               switch (this.title){
                   case 'qxz':
                   content.innerHTML='';
                       break;
                   case 'sg':
                   content.innerHTML='苹果、香蕉、鸭梨、橙子、西瓜';
                       break;
                   case 'dg':
                   content.innerHTML='慕斯、奶酪、海绵';
                       break;
                   case 'jg':
                   content.innerHTML='开心果、夏威夷果、腰果';
                       break;
               }
           }
//           menu.onchange=function(){
//               switch (this.value){
//                   case 'fruit':
//                   content.innerHTML='苹果、香蕉、鸭梨';
//                       break;
//
//               }
//           }
       </script>
   </body>
</html>