4-3 编程练习,是否正确

来源：4-3 编程练习

JakePrim

2019-07-29 17:43:33

<!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 class = 'dec'></span></p>
    <script>
    // 此处写代码
    var menus = document.querySelector('#menu');
        var dec = document.querySelector('.dec');
        menus.onchange = function () {
            var index = menus.selectedIndex;
            var value = menus.options[index].value;
            console.log('改变' + index + value);
            switch (value) {
                case 'fruit':
                    dec.innerHTML = '苹果 香蕉 橘子 橙子';
                    break;
                case 'cake':
                    dec.innerHTML = '水果蛋糕 奶油蛋糕 巧克力蛋糕';
                    break;
                case 'nuts':
                    dec.innerHTML = '鼻根贵 夏威夷果';
                    break;
                default:
                    dec.innerHTML = '';
                    break;
            }
        }
        
    </script>
</body>
</html>

写回答

1回答