最近有空用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. WaitType：ASYNC_IO_COMPLETION

    项目组有一个数据库备份的Job运行异常,该Job将备份数据存储到remote server上,平时5个小时就能完成的备份操作,现在运行19个小时还没有完成,backup命令的Wait type是 AS ...

  2. 没有Hyper-V服务，WP Emulator无法启动

    解决: 打开管理工具

  3. 【WP8.1开发】用手机来控制电脑的多媒体播放

    为了用电脑看电影时方便控制,我就突发其想,做一个手机app来通过无线网络远程调节电脑上的音量.后来进行尝试成功后,我就想,光是调音量似乎单调了些,就把播放/暂停,上一首,下一首,等多媒体控制功能也加上 ...

  4. java的栈图形演示

    import java.awt.*; import javax.swing.*; import java.awt.event.*; /* 指示发生了组件定义的动作的语义事件.当特定于组件的动作(比如被 ...

  5. [ASP.NET MVC] 利用自定义的AuthenticationFilter实现Basic认证

    很多情况下目标Action方法都要求在一个安全上下文中被执行,这里所谓的安全上下文主要指的是当前请求者是一个经过授权的用户.授权的本质就是让用户在他许可的权限范围内做他能够做的事情,授权的前提是请求者 ...

  6. RequireJs调研

    背景 Problem(问题) Web sites are turning into Web apps(网站正转变为网络应用程序) Code complexity grows as the site g ...

  7. 2014年百度之星程序设计大赛 - 初赛（第二轮）Chess

    题目描述:小度和小良最近又迷上了下棋.棋盘一共有N行M列,我们可以把左上角的格子定为(1,1),右下角的格子定为(N,M).在他们的规则中,“王”在棋盘上的走法遵循十字路线.也就是说,如果“王”当前在 ...

  8. Windows 搭建 .NET 跨平台环境并运行应用程序

    写在前面 阅读目录: Install .NET Version Manager (DNVM) Install .NET Core Execution Environment (DNX) Write t ...

  9. html5 meta(移动端）介绍及使用

    随着高端手机(Andriod,Iphone,Ipod,WinPhone等)的盛行,移动互联应用开发也越来越受到人们的重视,用html5开发移动应用是最好的选择.然而,每一款手机有不同的分辨率,不同屏幕 ...

  10. 浅谈C#中一种类插件系统编写的简单方法（插件间、插件宿主间本身不需要通信）

    文章版权由作者李晓晖和博客园共有,若转载请于明显处标明出处:http://www.cnblogs.com/naaoveGIS/. 1.背景 三年多前还在上研时,用C#+反射机制写过插件系统,后来又用M ...