1 <!DOCTYPE html>
2 <html >
3 <head>
4 <meta charset="UTF-8">
5 <title>二级联动</title>
6 <script src="http://apps.bdimg.com/libs/jquery/1.8.1/jquery.min.js" type="text/javascript"></script>
7 <script type="text/javascript">
8 $(document).ready(function(){
9 $("#province").change(function(){
10 $("#province option").each(function(i,o){
11 if($(this).attr("selected"))
12 {
13 $(".city").hide();
14 $(".city").eq(i).show();
15 }
16 });
17 });
18 $("#province").change();
19 });
20 </script>
21 </head>
22 <body>
23 <select >
24 <option>----请选择省份----</option>
25 <option>北京</option>
26 <option>上海</option>
27 <option>江苏</option>
28 </select>
29 <select class="city">
30 <option>----请选择城市----</option>
31 </select>
32 <select class="city">
33 <option>东城</option>
34 <option>西城</option>
35 <option>崇文</option>
36 <option>宣武</option>
37 <option>朝阳</option>
38 </select>
39 <select class="city">
40 <option>黄浦</option>
41 <option>卢湾</option>
42 <option>徐汇</option>
43 <option>长宁</option>
44 <option>静安</option>
45 </select>
46 <select class="city">
47 <option>南京</option>
48 <option>镇江</option>
49 <option>苏州</option>
50 <option>南通</option>
51 <option>扬州</option>
52 </select>
53 </body>
54 </html>