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

2024-04-27 14:17:37

字体：大中小

来源：转载

供稿：网友

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         p14         {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         .Show24         {25             background: #FFA07A;26         }27         .hand28         {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             Change44             <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 select51             <input name="cbDisabled" type="checkbox" />52         </p>53         <p>54             setValue55             <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>

效果图: