最近有空用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. ueditor的配置和使用

    ueditor下载好之后直接复制到项目的WebContent目录下,并将ueditor\jsp\lib下的jar包复制或者剪切到项目的lib目录下.先看一下效果,如下: 1.文件的上传 首先在uedi ...

  2. VS2015 Enterprise 安装之惊险及收获

    前言 园子早早的就有人安装了VS 2015,自己也按捺不住了,也要赶快尝尝鲜!结果在其安装过程中一个小小的问题却困扰了我一天,这其中多亏了dudu耐心的解答才得以顺利完成,如果你也遇见这个问题,看过这 ...

  3. SubSonic3.0.0.4.3源码包与调用Dll

    版本修改历史 3.0.0.4.3版修复了下面问题: 修正多表关联查询时,使用左关联和右关联出错问题修正DbDataProvider.cs类的ToEnumerable函数打开数据库链接后没有关闭的问题添 ...

  4. etlpy: 并行爬虫和数据清洗工具（开源）

    etlpy是python编写的网页数据抓取和清洗工具,核心文件etl.py不超过500行,具备如下特点 爬虫和清洗逻辑基于xml定义,不需手工编写 基于python生成器,流式处理,对内存无要求 内置 ...

  5. 楼主，可否发一份代码给我！QQ....

    一般来说,但凡博主写一篇很赞的文章,然后贴上演示demo的图片或者结果之后,下面一定有一大堆要代码的.不论你在博客中,把算法讲得多么透彻清晰,各种流程图伪代码一清二楚:也不论你提出了任何漂亮的思路和设 ...

  6. Google Chrome 应用商店上传扩展程序

    1. 进入 Google 开发者中心 网址: https://chrome.google.com/webstore/developer/dashboard?hl=zh-cn 2. 添加新项 上传后,出 ...

  7. sublime3破解版sublime3注册码

    Sublime Text 3 官方网址:http://www.sublimetext.com/ Mac下载地址: http://c758482.r82.cf2.rackcdn.com/Sublime% ...

  8. 小身材大用途，用PrimusUI驾驭你的页面

    “PrimusUI”是自己在借鉴了如今网上很多开源的UI库,再经过自己整理加工的一个简单代码集合. 每个功能块的CSS代码都很少,力求简单易懂,低门槛,代码可根据自己实际情况轻易修改,改到符合自己场景 ...

  9. CSS中position的4种定位详解

    大家都知道,css中的position有4种取值,分别是static.fixed.relative.absolute. 详细解释: static:相当于没有定位,元素会出现在正常的文档流中. fixe ...

  10. iOS_UIImage的方向(imageOrientation)

    Demo下载地址 一.重现问题: 拍照获得的图片,由于尺寸不对,需要拆切.但是有的图片拆切出来,方向就乱了.查找了一些质量才知道.图片还有个方向属性! imageOrientation. 二.一个图片 ...