jquery实现2级联动 

 1 <!DOCTYPE html>
 2 <html lang="en">
 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 id="province">
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>

 

posted @ 2016-04-12 16:49  _marven  阅读(526)  评论(0)  编辑  收藏  举报