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>