select change下拉框改变事件设置选定项，禁用select

 select change下拉框改变事件 设置选定项，禁用select 


 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2 <html xmlns="http://www.w3.org/1999/xhtml">
 3 <head>
 4     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 5     <title>Select Change()</title>
 6     <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>
 7     <style type="text/css">
 8         .align-center
 9         {
10             margin: 0 auto; /* 居中 这个是必须的，，其它的属性非必须 */
11             width: 700px; /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */
12         }
13         p
14         {
15             width: 700px;
16             margin: 10px 0 0 0;
17             padding: 10px;
18             border: 0;
19             border: 1px dotted Orange;
20             background: #f5f5f5;
21             min-height: 25px;
22         }
23         .Show
24         {
25             background: #FFA07A;
26         }
27         .hand
28         {
29             cursor: pointer;
30         }
31     </style>
32 </head>
33 <body>
34     <div class="align-center">
35         <p>
36             1.change 在select元素值改变时触发。
37             <br />
38             2.disabled 设置下拉框为禁用模式
39             <br />
40             3.setValue 选择radio 改变 select选中项
41         </p>
42         <p>
43             Change
44             <select name="selectTest">
45                 <option value="1">First</option>
46                 <option value="2">Second</option>
47                 <option value="3" selected="selected">Third</option>
48                 <option value="4">Fourth</option>
49             </select>
50             disabled select
51             <input name="cbDisabled" type="checkbox" />
52         </p>
53         <p>
54             setValue
55             <br />
56             First<input type="radio" name="rdoValue" value="1" class="hand" />
57             Second<input type="radio" name="rdoValue" value="2" class="hand" />
58             Third<input type="radio" name="rdoValue" value="3" class="hand" />
59             Fourth<input type="radio" name="rdoValue" value="4" class="hand" />
60         </p>
61         <p>
62             showValue:
63             <input type="text" name="inputValue" />
64         </p>
65         <p class="Show">
66             用来显示隐藏地..
67         </p>
68     </div>
69 </body>
70 </html>
71 <script type="text/javascript">
72     $(function () {
73         $("select[name='selectTest']").change(function () {
74             var selectValue = $(this).children('option:selected').val(); //这就是selected的值
75             SetCommon(selectValue)
76         });
77         $("input[name='cbDisabled']").bind("click", function () {
78             if ($(this).attr("checked") == "checked") {
79                 $("select[name='selectTest']").attr("disabled", true)
80             } else {
81                 $("select[name='selectTest']").attr("disabled", false)
82             }
83         });
84         $("input[name='rdoValue']").click(function () {
85             $("select[name='selectTest'").val($(this).val()); //设置selected 值
86             SetCommon($(this).val())
87         });
88     })
89     function SetCommon(selectValue) {
90         $("input[name='inputValue']").val(selectValue);
91         if (selectValue == 1 || selectValue == 2) {
92             $(".Show").toggle(false);
93         } else {
94             $(".Show").toggle(true);
95         }
96     }
97 </script>
效果图:
附件下载：https://files.cnblogs.com/Orange-C/SelectDemo.zip
posted @ 2014-10-24 14:54 Orange. 阅读(13181) 评论(0) 收藏举报
刷新页面返回顶部
select change下拉框改变事件 设置选定项，禁用select

select change下拉框改变事件设置选定项，禁用select
