请老师检查
来源：4-3 编程练习
慕容6327414
2019-11-19 21:26:48
<!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></span></p>
<script>
var menu = document.querySelector('#menu');
var spans = document.getElementsByTagName('span');
menu.onclick = function(){
switch(this.value){
case 'fruit':
spans[0].innerHTML = '香蕉, 西瓜, 桃'
break;
case 'cake':
spans[0].innerHTML = '慕斯, 巧克力蛋糕,榴莲蛋糕'
break;
case 'nuts':
spans[0].innerHTML = '巴坦木, 开心果, 杏仁'
break;
default:
spans[0].innerHTML = '';
}
}// 此处写代码
</script>
</body>
</html>
2回答
-
我学习太差被关起来了
2019-12-04
老哥的代码还可以优化一下，提高可维护性。参考如下：
<!DOCTYPE html> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>4-3-编程练习</title> <meta charset="UTF-8"> <meta name="renderer" content="webkit"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> </head> <body> <p>请选择菜单： <select id="menu"> <option value="select">请选择</option> <option value="fruit">水果</option> <option value="cake">蛋糕</option> <option value="nuts">坚果</option> <option value="sport">运动</option> <option value="milk">牛奶</option> </select> </p> <p>该系列有：<span class="content"></span></p> <script type="text/javascript"> // 内容展示区列表 let arrayList = [ "", "苹果，鸭梨，香蕉，龙眼，荔枝，香橙，西瓜", "慕斯，奶酪，重油，黑森林，戚风", "巴旦木，碧根果，开心果，夏威夷果，杏仁，榛子", "乒乓球，羽毛球，跑步，游泳，篮球，足球", "蒙牛，伊利，光明，燕糖，三元，香满楼", ]; // 获取<select> DOM元素 let eleMenu = document.getElementById("menu"); // 获取<option> DOM元素的类数组及其长度 let eleOptions = eleMenu.getElementsByTagName("option"); const LEN = eleOptions.length; // 创建数组optionValues，用于存储<option>标签的value值 let optionValues = []; for (let i = 0; i <= LEN - 1; ++i) { optionValues[i] = eleOptions[i].value; } // 获取内容展示区 let eleContent = document.querySelector(".content"); // 对menu进行click事件绑定 eleMenu.addEventListener("click", function(event) { for (key in optionValues) { if (event.target.value === optionValues[key]) { eleContent.innerText = arrayList[key]; } } }); </script> </body> </html>0 -
好帮手慕码
2019-11-20
同学你好，效果实现正确。继续加油~
0
