<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>事件类型（onchange）</title>
<!--
n.onchange=代码a;元素n的值发生变化时执行代码a；
扩展知识：
a.options: 可返回a元素中所有 <option> 的一个数组。
a.selectIndex: 可设置或返回下拉列表a中被选选项的索引号
-->
<script>
window.onload=function (){ //页面加载完成后执行函数
var a=document.getElementById("sel"); //获取下拉列表
a.onchange=function (){ //下拉列表发生变化时执行函数
//var val=this.value; //可以用此方法获取下拉列表中每个选项的value
var val=a.options[a.selectedIndex].value;//也可以用此方法获取下拉列表中每个选项的value
document.body.style.background=val;//给body设置背景颜色，颜色值为下拉框选项的value
}
}
</script>
</head>
<body>
<span>请选择页面颜色：</span>
<select id="sel">
<option value="white" selected>请选择</option>
<option value="red">红色</option>
<option value="green">绿色</option>
<option value="blue">蓝色</option>
</select>
</body>
</html>
