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

 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

 <html xmlns="http://www.w3.org/1999/xhtml">

 <head>

     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

     <title>Select Change()</title>

     <script src="Scripts/jquery-1.7.1.min.js" type="text/javascript"></script>

     <style type="text/css">

         .align-center

         {

             margin: 0 auto; /* 居中 这个是必须的，，其它的属性非必须 */

             width: 700px; /* 给个宽度 顶到浏览器的两边就看不出居中效果了 */

         }

         p

         {

             width: 700px;

             margin: 10px 0 0 0;

             padding: 10px;

             border: 0;

             border: 1px dotted Orange;

             background: #f5f5f5;

             min-height: 25px;

         }

         .Show

         {

             background: #FFA07A;

         }

         .hand

         {

             cursor: pointer;

         }

     </style>

 </head>

 <body>

     <div class="align-center">

         <p>

             1.change 在select元素值改变时触发。

             <br />

             2.disabled 设置下拉框为禁用模式

             <br />

             3.setValue 选择radio 改变 select选中项

         </p>

         <p>

             Change

             <select name="selectTest">

                 <option value="1">First</option>

                 <option value="2">Second</option>

                 <option value="3" selected="selected">Third</option>

                 <option value="4">Fourth</option>

             </select>

             disabled select

             <input name="cbDisabled" type="checkbox" />

         </p>

         <p>

             setValue

             <br />

             First<input type="radio" name="rdoValue" value="1" class="hand" />

             Second<input type="radio" name="rdoValue" value="2" class="hand" />

             Third<input type="radio" name="rdoValue" value="3" class="hand" />

             Fourth<input type="radio" name="rdoValue" value="4" class="hand" />

         </p>

         <p>

             showValue:

             <input type="text" name="inputValue" />

         </p>

         <p class="Show">

             用来显示隐藏地..

         </p>

     </div>

 </body>

 </html>

 <script type="text/javascript">

     $(function () {

         $("select[name='selectTest']").change(function () {

             var selectValue = $(this).children('option:selected').val(); //这就是selected的值

             SetCommon(selectValue)

         });

         $("input[name='cbDisabled']").bind("click", function () {

             if ($(this).attr("checked") == "checked") {

                 $("select[name='selectTest']").attr("disabled", true)

             } else {

                 $("select[name='selectTest']").attr("disabled", false)

             }

         });

         $("input[name='rdoValue']").click(function () {

             $("select[name='selectTest'").val($(this).val()); //设置selected 值

             SetCommon($(this).val())

         });

     })

     function SetCommon(selectValue) {

         $("input[name='inputValue']").val(selectValue);

         if (selectValue == 1 || selectValue == 2) {

             $(".Show").toggle(false);

         } else {

             $(".Show").toggle(true);

         }

     }

 </script>