jquery實現一個簡單的select二級聯動菜單,代碼如下
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>jQuery 二級聯動</title> 6 <style> 7 .city{ 8 display: none;; 9 } 10 .city_first { 11 display: block; 12 } 13 </style> 14 <script src="jquery/jquery-1.11.3.min.js"></script> 15 <script> 16 $(document).ready(function(){ 17 $("#province").change(function(){ 18 var index = $(this).get(0).selectedIndex; 19 $('.city').hide().eq(index).show(); 20 }); 21 }); 22 </script> 23 </head> 24 <body> 25 <select id="province"> 26 <option>----請選擇省份----</option> 27 <option>北京</option> 28 <option>上海</option> 29 <option>江蘇</option> 30 </select> 31 <select class="city city_first"> 32 <option>----請選擇城市----</option> 33 </select> 34 35 <select class="city"> 36 <option>----請選擇城市----</option> 37 <option>東城</option> 38 <option>西城</option> 39 <option>崇文</option> 40 <option>宣武</option> 41 <option>朝陽</option> 42 </select> 43 <select class="city"> 44 <option>----請選擇城市----</option> 45 <option>黃浦</option> 46 <option>盧灣</option> 47 <option>徐匯</option> 48 <option>長寧</option> 49 <option>靜安</option> 50 </select> 51 <select class="city"> 52 <option>----請選擇城市----</option> 53 <option>南京</option> 54 <option>鎮江</option> 55 <option>蘇州</option> 56 <option>南通</option> 57 <option>揚州</option> 58 </select> 59 </body> 60 </html>