jQuery - 全国省市县三级联动

时间：2021-08-22 10:48:47

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

废话不多说，贴上代码：

 <!doctype html>

 <html>

 <head>

 <meta charset="UTF-8">

 <title>下拉框</title>

 <script src="city.js"></script>

 <script src="jquery-1.11.3.js"></script>

 <style>

     div{

         width:500px;

         margin:0 auto;

         text-align:center;

     }

     select{

         width:100px;

     }

 </style>

 </head>

 <body>

 <div>

     <h1>全国省市县三级联动</h1>

     <select id="province">

         <option value="省份（市）">省份（市）</option>

     </select>

     <select id="city">

         <option value="市（区）">市（区）</option>

     </select>

     <select id="county">

         <option value="县、镇">县、镇</option>

     </select>

 </div>

 <script>

 var cityAll=city.citylist;

 $.each(cityAll,function(i,n){

     $("#province").append('<option value="'+ n.p + '">' + n.p + '</option>');

 });

 $("#province,#city").change(function(){

     if($(this).attr("id") == "province"){

         $("#city").html("").append('<option value="市（区）">市（区）</option>').next().html("").append('<option value="县、镇">县、镇</option>');

     }else{

         $("#county").html("").append('<option value="县、镇">县、镇</option>');

     }

     $.each(cityAll,function(j,k){

         if($("#province").val() == k.p){

             $.each(k.c,function(l,m){

                 $("#city").append('<option value="'+ m.n + '">' + m.n + '</option>');

                 if(m.a){

                     $("#county").show();

                     if($("#city").val() == m.n){

                         $.each(m.a,function(e,f){

                             $("#county").append('<option value="'+ f.s + '">' + f.s + '</option>');

                         });

                     }

                 }else{

                     $("#county").hide();

                 }

             });

         }

     });

 });

 </script>

 </body>

 </html>

做出来的效果就是：

全国省市县三级联动

省份（市）

市（区）

县、镇

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

相关文章