SELECT 三级联动 [转] 

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4 <meta charset=gbk />
 5 <title>selectList</title>
 6 <style type="text/css">
 7     *{margin:0;padding:0;}
 8     .selectList{width:200px;margin:50px auto;}
 9 </style>
10 <script type="text/javascript" src="jquery1.7.1.js"></script>
11 </head>
12 <body>
13     <div class="selectList">
14         <select class="province">
15             <option>请选择</option>
16         </select>
17         <select class="city">
18             <option>请选择</option>
19         </select>
20         <select class="district">
21             <option>请选择</option>
22         </select>
23     </div>
24     <div class="selectList">
25         <select class="province">
26             <option>请选择</option>
27         </select>
28         <select class="city">
29             <option>请选择</option>
30         </select>
31         <select class="district">
32             <option>请选择</option>
33         </select>
34     </div>
35     <script type="text/javascript">
36     $(function(){
37         $(".selectList").each(function(){
38             var url = "area.json";
39             var areaJson;
40             var temp_html;
41             var oProvince = $(this).find(".province");
42             var oCity = $(this).find(".city");
43             var oDistrict = $(this).find(".district");
44             //初始化省
45             var province = function(){
46                 $.each(areaJson,function(i,province){
47                     temp_html+="<option value='"+province.p+"'>"+province.p+"</option>";
48                 });
49                 oProvince.html(temp_html);
50                 city();
51             };
52             //赋值市
53             var city = function(){
54                 temp_html = ""; 
55                 var n = oProvince.get(0).selectedIndex;
56                 $.each(areaJson[n].c,function(i,city){
57                     temp_html+="<option value='"+city.ct+"'>"+city.ct+"</option>";
58                 });
59                 oCity.html(temp_html);
60                 district();
61             };
62             //赋值县
63             var district = function(){
64                 temp_html = ""; 
65                 var m = oProvince.get(0).selectedIndex;
66                 var n = oCity.get(0).selectedIndex;
67                 if(typeof(areaJson[m].c[n].d) == "undefined"){
68                     oDistrict.css("display","none");
69                 }else{
70                     oDistrict.css("display","inline");
71                     $.each(areaJson[m].c[n].d,function(i,district){
72                         temp_html+="<option value='"+district.dt+"'>"+district.dt+"</option>";
73                     });
74                     oDistrict.html(temp_html);
75                 };
76             };
77             //选择省改变市
78             oProvince.change(function(){
79                 city();
80             });
81             //选择市改变县
82             oCity.change(function(){
83                 district();
84             });
85             //获取json数据
86             $.getJSON(url,function(data){
87                 areaJson = data;
88                 province();
89             });
90         });
91     });
92     </script>
93 </body>
94 </html>

 

posted @ 2014-12-17 15:52  吻上明天  阅读(206)  评论(0)  编辑  收藏  举报