轉自：http://www.cnblogs.com/linjiqin/p/3148228.html
本案例實現類似開關按鈕效果。
頁面有下拉列表、文本框、按鈕等表單元素，大致實現如下效果：
1、頁面一加載時，文本框隱藏，下拉列表顯示，按鈕值變為“顯示文本框”。
2、點擊“顯示文本框”按鈕時，文本框顯示，下拉列表隱藏，按鈕值變為“顯示下拉列表”。
3、點擊“顯示下拉列表”按鈕時，文本框隱藏，下拉列表顯示，按鈕值變為“顯示文本框”。
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>hide_or_show.html</title> <meta http-equiv="keywords" content="keyword1,keyword2,keyword3"> <meta http-equiv="description" content="this is my page"> <meta http-equiv="content-type" content="text/html; charset=UTF-8"> <script type="text/javascript" src="js/jquery-1.3.1.js"></script> <script type="text/javascript"> var i=0; //全局變量，用來控制按鈕值 function isShow(){ //在點擊按鈕時，初始化為默認值 //設置select的value值為空的項選中 $("#city option[value='0']").attr("selected", true); $("#username").val(""); $("#show_text").toggle("fast", function(){ i++; if(i%2==0){ //偶數時 $("#btnShow").val("顯示文本框"); }else{ $("#btnShow").val("顯示下拉列表"); } }); $("#show_select").toggle(); } //頁面加載時，把文本框隱藏起來 function hide(){ $("#show_text").hide(); } </script> </head> <body onload="hide()"> <span id="show_select"> <select id="city"> <option value="0">請選擇...</option> <option value="1">北京</option> <option value="2">上海</option> </select> </span> <span id="show_text" style="display: inline; "> <input id="username" size="20" /> </span> <div> <input type="button" id="btnShow" onclick="isShow()" value="顯示文本框" /> </div> </body> </html>