请老师检查，谢谢

来源：4-3 编程练习

qq_慕移动3101913

2019-10-23 16:00:08

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>Document</title>
</head>
<body>
    <p>
        请选择菜单：
        <select id="menu">
            <option>请选择</option>
            <option value="fruit">水果</option>
            <option value="cake">蛋糕</option>
            <option value="nuts">坚果</option>
        </select>
    </p>
    <p >该系列有：<span id="datail"></span></p>
    <script>
    // 此处写代码
    //获取元素
        var select = document.querySelector('#menu');
        var datail=document.querySelector('#datail');
      // //绑定事件
      //   select.onchange = function(){
      //        switch (this.value) {
      //               case 'fruit':
      //                   fruitHandler();
      //                   break;
      //               case 'cake':
      //                   cakeHandler();
      //                   break;
      //               case 'nuts':
      //                   nutsHandler();
      //                   break;
      //               default:  //当表达式的值没有匹配，执行这里的语句
      //                   datail.innerHTML='';
      //                   break;
      //           }
      //   }
  
      //   //函数
      //   function fruitHandler() {
      //       datail.innerHTML='苹果、香蕉、鸭梨、橙子、西瓜';
      //   }
      //   function cakeHandler() {
      //       datail.innerHTML='慕斯、奶酪、海绵、重油、戚风';
      //   }
      //   function nutsHandler() {
      //       datail.innerHTML='碧根果、巴旦木、夏威夷果、腰果、开心果';
      //   }
        //更简洁方法
        //绑定事件
        select.onchange = function(){
             switch (this.value) {
                    case 'fruit':
                        datail.innerHTML='苹果、香蕉、鸭梨、橙子、西瓜';
                        break;
                    case 'cake':
                         datail.innerHTML='慕斯、奶酪、海绵、重油、戚风';
                        break;
                    case 'nuts':
                       datail.innerHTML='碧根果、巴旦木、夏威夷果、腰果、开心果';
                        break;
                    default:  //当表达式的值没有匹配，执行这里的语句
                        datail.innerHTML='';
                        break;
                }
        }
    </script>
</body>
</html>

写回答

1回答