<!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>