检查一下代码
来源：4-3 编程练习
weixin_慕的地5241954
2019-09-18 02:10:41
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
</head>
<body>
<p>
请选择菜单：
<select id="menu">
<option value="">请选择</option>
<option value="fruit">水果</option>
<option value="cake">蛋糕</option>
<option value="nuts">坚果</option>
</select>
</p>
<p>该系列有：<span></span></p>
<script>
// 此处写代码
var ps = document.querySelectorAll('p');
var menu = document.querySelector('#menu');
var options = menu.querySelectorAll('option');
var spans = ps[1].querySelector('span');
for(var i = 0;i < options.length;i++){
menu.onchange = function(){
console.log(this.value)
switch(this.value){
case '':
selOption();
break;
case 'fruit':
fruitOption();
break;
case 'cake':
cakeOption();
break;
case 'nuts':
nutsOption();
break;
}
}
}
function selOption(){
options.innerHTML = '请选择';
spans.innerHTML = '';
}
function fruitOption(){
options.innerHTML = '水果';
spans.innerHTML = '苹果';
}
function cakeOption(){
options.innerHTML = '蛋糕';
spans.innerHTML = '慕斯';
}
function nutsOption(){
options.innerHTML = '坚果';
spans.innerHTML = '夏威夷';
}
</script>
</body>
</html>1、 在脚本中监听下拉列表的选项改变，并获取选项值
3、将最终结果写入到页面中的相应位置
能通俗的解释一下这两句话的意思吗？
switch功能函数能单独写出来吗？写回答
2回答
-
你好同学，问题解答如下：
1.在脚本中监听下拉列表的选项改变，并获取选项值。
意思就是定义一个onchange事件用来监听选中项的变化，例如选中水果的时候，那么选中这个选项的value值“fruit”。这样根据value值，就能判断下面的span要显示什么内容哦。也就是如下代码：
3.将最终结果写入到页面中的相应位置。
意思就是当你选中水果的时候，就要把水果对应的内容（例如“苹果，荔枝...”）显示到下面的span中。
也就是如下代码：
3.可以单独拿出来，参考如下：
祝学习愉快，望采纳。
0h019-09-18 -
好帮手慕夭夭
2019-09-19
你好同学，在你的代码中，switch中的代码不封装成函数也可以的。像你这里只有一个下拉菜单，所以不需要循环中绑定事件，如下也是可以的。这里封装成函数没有特殊的含义，假如循环中执行的代码多了，封装成函数更清晰一些。
但是同学的代码中没有点击事件，需要具体情况具体清晰。如果你有疑惑，建议重新创建一个问题，把有疑惑的代码粘贴到问答区，以便老师为你分析。
祝学习愉快，望采纳。
0
相似问题