jquery　change事件

最新推荐文章于 2022-01-11 11:36:50 发布

weixin_34082854

最新推荐文章于 2022-01-11 11:36:50 发布

阅读量135

点赞数

文章标签： python javascript ViewUI

原文链接：https://my.oschina.net/kitty0107/blog/1626638

版权

2019独角兽企业重金招聘Python工程师标准>>>

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