最近有空用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什么的也导进去，发现没效果，如果有想看的可以去下面我的云盘里面下载，如果有什么好的建议，也欢迎大家提出

jQuery - 全国省市县三级联动的更多相关文章

  1. Android 省市县 三级联动（android-wheel的使用）

    转载请注明出处:http://blog.csdn.net/lmj623565791/article/details/23382805 今天没事跟群里面侃大山,有个哥们说道Android Wheel这个 ...

  2. 省市县三级联动js代码

    省市县三级联动菜单,JS全国省市县(区)联动代码,一般可以用于用户注册或分类信息二手交易网站,需要的朋友直接复制代码就可以用了,不过有朋友反馈说缺少某些城市,具体缺少哪个尚不知,请想用的朋友自己补全吧 ...

  3. wex5 实战 省市县三级联动与地址薄同步

    无论是商城,还是快递,都要用到省市县三级联动,和地址薄,今天就以实战来制作,难点有3个: 1:三级联动,有wex5组件实现,相对简单,实战里对行数据进行了拼接 2:  地址薄选项,利用inputSel ...

  4. 省市县三级联动 sql语句

    发现在网上的省市县三级联动大部分是mysql的.就算是sqlserver的,也不准确.于是就把mysql的给改了下,适用sqlserver.sql语句如下: CREATE TABLE Dic_Area ...

  5. Android 省市县 三级联动（android-wheel的使用）[转]

    转载:http://blog.csdn.net/lmj623565791/article/details/23382805 今天没事跟群里面侃大山,有个哥们说道Android Wheel这个控件,以为 ...

  6. php仿经典省市县三级联动

    之前有个需求要写个类似省市县三级联动的页面,于是,网上找了点资料看了下,其实原理很简单: 当我们选择一级栏目中某条记录的时候,会获取该栏目的vaule值,并发起ajax请求,后台根据这个vaule值, ...

  7. JQuery实现省市区的三级联动

    JQuery实现省市区的三级联动 <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "h ...

  8. 项目总结01：JSP mysql SpringMvc下中国省市县三级联动下拉框

    JSP mysql SpringMvc下中国省市县三级联动下拉框 关键词 JSP  mysql数据库  SpringMvc  ajax   Controller层  Service层  中国地区  省 ...

  9. Day 16 之二 省市县三级联动

    摘录自:雨神,供参考! province_dic = { "河北": { "石家庄": ["鹿泉", "藁城", &qu ...

随机推荐

  1. win8下IE10的鼠标mouse事件响应错误BUG

    具体症状就是有时候鼠标左键响应,有时候右键才能响应 问题的原因就是事件对象的detail没有复位 https://github.com/clientside/amplesdk/issues/187

  2. lua解析脚本过程中的关键数据结构介绍

    在这一篇文章中我先来介绍一下lua解析一个脚本文件时要用到的一些关键的数据结构,为将来的一系列代码分析打下一个良好的基础.在整个过程中,比较重要的几个源码文件分别是:llex.h,lparse.h.l ...

  3. OpenCASCADE6.8.0 Reference Manual Serach Problem

    OpenCASCADE6.8.0 Reference Manual Serach Problem eryar@163.com 1. Problem 有网友反映OpenCASCADE6.8.0的Refe ...

  4. Minor【 PHP框架】4.服务容器与服务提供者

    框架Github地址:github.com/Orlion/Minor (如果觉得还不错给个star哦(^-^)V) 框架作者: Orlion 知乎:https://www.zhihu.com/peop ...

  5. EntityFramework 7.0之初探【基于VS 2015】（十）

    前言 本篇作为EF 7.0的开篇也是Entity Framework目前系列末篇,因为关于EF 7.0学习资料实在是太少,我都是参考老外的资料花费了不少时间去研究去尝试同时也失败多次,个人觉得那是值得 ...

  6. Android APK签名

    一.为什么要签名? 开发Android的人这么多,完全有可能大家都把类名,包名起成了一个同样的名字,这时候如何区分?签名这时候就是起区分作用的. 由于开发商可能通过使用相同的Package Name来 ...

  7. 如何用Pivot实现行列转换

    在Oracle中,如果要实现行列转换,较为常见的是用DECODE和CASE语句.对于简单的行列转行,DECODE和CASE语句尚能应付.在逻辑比较复杂,分组聚合较多的场景中,DECODE和CASE语句 ...

  8. 关于Java中的final关键字

    Java中的final关键字是用来限制用户行为的,说白了,就是用来限制我们这些程序员的.final可以用来修饰:变量.方法.类. 1)Java final variable final用来修饰变量时, ...

  9. GeoServer中利用SLD配图之矢量图层配图

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1 背景 我们在ArcMap中可以直接通过symbol功能对图层进行定 ...

  10. mysql转换类型

    今天遇到一个问题,那就是当时一个项目设计表的时候,把时间以20160101123596这样的形式,以varchar存到了数据库里. 今天要写一条sql,查询一个报表,条件就是要过滤这个时间,但是var ...