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>
效果图:
附件下载：http://files.cnblogs.com/Orange-C/SelectDemo.zip
时间： 2024-08-01 23:04:47