最近有空用jquery做了一个全国省市县的三级联动，在以后或许可以用的到，遗憾的是我还没用封装，等有空看能不能封装成一个插件

废话不多说，贴上代码：

 1 <!doctype html>
 2 <html>
 3 <head>
 4 <meta charset="UTF-8">
 5 <title>下拉框</title>
 6 <script src="city.js"></script>
 7 <script src="jquery-1.11.3.js"></script>
 8 <style>
 9     div{
10         width:500px;
11         margin:0 auto;
12         text-align:center;
13     }
14     select{
15         width:100px;
16     }
17 </style>
18 </head>
19 <body>
20 <div>
21     <h1>全国省市县三级联动</h1>
22     <select id="province">
23         <option value="省份（市）">省份（市）</option>
24     </select>
25     <select id="city">
26         <option value="市（区）">市（区）</option>
27     </select>
28     <select id="county">
29         <option value="县、镇">县、镇</option>
30     </select>
31 </div>
32 <script>
33 var cityAll=city.citylist;
34 $.each(cityAll,function(i,n){
35     $("#province").append('<option value="'+ n.p + '">' + n.p + '</option>');
36 }); 
37 $("#province,#city").change(function(){
38     if($(this).attr("id") == "province"){
39         $("#city").html("").append('<option value="市（区）">市（区）</option>').next().html("").append('<option value="县、镇">县、镇</option>');
40     }else{
41         $("#county").html("").append('<option value="县、镇">县、镇</option>');
42     }
43     $.each(cityAll,function(j,k){
44         if($("#province").val() == k.p){
45             $.each(k.c,function(l,m){
46                 $("#city").append('<option value="'+ m.n + '">' + m.n + '</option>');
47                 if(m.a){
48                     $("#county").show();
49                     if($("#city").val() == m.n){
50                         $.each(m.a,function(e,f){
51                             $("#county").append('<option value="'+ f.s + '">' + f.s + '</option>');
52                         });
53                     }    
54                 }else{
55                     $("#county").hide();
56                         
57                 }
58             });
59         }
60     });
61 });
62 
63 </script>
64 </body>
65 </html>

做出来的效果就是：

全国省市县三级联动

好吧，我试着把js什么的也导进去，发现没效果，如果有想看的可以去下面我的云盘里面下载，如果有什么好的建议，也欢迎大家提出

链接: https://pan.baidu.com/s/1geZh41X 密码: 2zdq

秒客网

jQuery - 全国省市县三级联动

全国省市县三级联动

相关文章