首页 > 代码库 > select change下拉框改变事件
select change下拉框改变事件
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>
效果图:
附件下载：http://files.cnblogs.com/Orange-C/SelectDemo.zip
select change下拉框改变事件
声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉： 投诉/举报 工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。