<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>onchange事件</title>
<script>
//由于script放在前面,所以要用预加载onload事件。
window.onload=function(){
var oValue=document.getElementById("menu");
oValue.onchange=function(){
var bgcolor=this.value;
console.log(bgcolor);
//判断,如果value值为空,则为白色,否则为选择的颜色,并让颜色填充整个body里。
if(bgcolor==""){
document.body.style.background="#fff";
}else{
document.body.style.background=bgcolor;
}
}
}
</script>
</head>
<body>
<div class="box">
请输入您喜欢的颜色:
<select name="" id="menu">
<option value="">请选择</option>;
<option value="red">红色</option>;
<option value="green">绿色</option>;
<option value="orange">橘色</option>;
<option value="pink">粉色</option>;
<option value="blue">蓝色</option>;
<option value="gray">灰色</option>;
<option value="yellow">黄色</option>;
</select>
</div>
</body>
</html>
结果如下图所示: