<!DOCTYPE html>
<html> <head> <meta charset="UTF-8"> <meta name="Author" content="微普科技http://www.wiipu.com"/> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>改变下拉框选项的值来设置body不同的背景</title> <style type="text/css"> * { margin: 0; padding: 0; } body { background-color: red; } #sel { position: absolute; right: 50px; top: 50px; width: 180px; height: 50px; padding-left: 50px; font-size: 30px; } </style> <script src="http://xiguape.wiipu.com/basecode/js/jquery.1.9.1.min.js"></script> <script type="text/javascript"> $(document).ready(function(){ $("#sel").change(function(){ /*alert($(this).children('option:selected').val());*/ if($(this).children('option:selected').val()==0){ $("body").css("background-color","red"); }else if($(this).children('option:selected').val()==1){ $("body").css("background-color","green"); }else if($(this).children('option:selected').val()==2){ $("body").css("background-color","blue");}else{
$("body").css("background-color","gray"); }})
}); </script> </head> <body> <div id="zmkt"> <select id="sel" name="sel"> <option value="0">red</option> <option value="1">green</option> <option value="2">blue</option> <option value="3">gray</option> </select> </div> </body> </html>