求助...........

求助...........

<!DOCTYPE html>

<html>

<head>

    <meta charset="UTF-8">

    <title>Document</title>

</head>

<body>

    <p>

        请选择菜单:

        <select id="menu">

            <option>请选择</option>

            <option value="fruit" class="sele">水果</option>

            <option value="cake" class="sele">蛋糕</option>

            <option value="nuts" class="sele">坚果</option>

        </select>

    </p>

    <p>该系列有:<span></span></p>

    <script>

    // 此处写代码

    // 

    var span=document.querySelector('span');

    

    var menu=document.querySelector('#menu');

    var ops=menu.querySelectorAll('.sele');

    console.log(ops);

    ops.onchang=function(){

     switch(this.value){

     case 'fruit':span.innerHTML='苹果、香蕉、鸭梨、橙子、西瓜';

     break;

     case 'cake':span.innerHTML='慕斯、奶酪、海绵、橙子、西瓜';

     break;

     case 'nuts':span.innerHTML='碧根果、巴坦木、开心果、橙子、西瓜';

     break;

     }

     }


    


    </script>

</body>

</html>


正在回答 回答被采纳积分+1

登陆购买课程后可参与讨论,去登陆

1回答
qq_浅仓小星_0 2018-08-03 10:16:28

1、直接给menu绑定事件就行了,不是给下面的子元素绑定

2、事件名写错了,是onchange

3、最好给 请选择 加个空的value,然后当 case '' : span.innerHTML=''

如果能帮助到你,请采纳谢谢。

问题已解决,确定采纳
还有疑问,暂不采纳

恭喜解决一个难题,获得1积分~

来为老师/同学的回答评分吧

0 星
组件化思想开发电商网页 18版
  • 参与学习           人
  • 提交作业       467    份
  • 解答问题       4826    个

本路径带你通过系统学习HTML5、JavaScript、jQuery的进阶知识,不仅如此,还会学习如何利用组件化的思想来开发网页,知识点+案例,使得所学可以更好的得到实践。

了解课程
请稍等 ...
意见反馈 帮助中心 APP下载
官方微信

在线咨询

领取优惠

免费试听

领取大纲

扫描二维码,添加
你的专属老师