最近有空用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. 一篇通俗易懂的CSS层叠顺序与层叠上下文研究

    网上有很多这方面的教程,但不是苦涩难懂就是从哪copy过来的,反正很长一段时间我是没看懂,时间长了也没打算去研究了,主要原因是,基本上很少会遇到那些问题(所以说啊,要是没有研究精神的才懒得管它).但自 ...

  2. Win10+VS2015+EF6.0+MySQL5.6+MVC环境部署和排错

    本来已经好几个月不弄专业了,今天一哥们问我问题的时候重新捣鼓了一下,就做个文档供后来人参考吧~ 1.首先安装MySQL 5.6 安装很简单我就不说了,你参考下:http://jingyan.baidu ...

  3. 利用扩展事件进行调优和Troubleshooting PPT分享

        本篇主题是我在2015年中国数据库大会(DTCC)上的分享,扩展事件从2008版本出来到现在已经有6-7年,国内却很少有相关资料和使用,现在分享一下PPT,希望对大家有所帮助.       可 ...

  4. gsoap设置超时

    1.修改gsoap自动生成的代码才能进行超时设置(我这边访问web service的代码都是gsoap工具自动生成.根据wsdl接口) 2.找到生成的soapwwwsdlBindingProxy.cp ...

  5. iOS开发之窥探UICollectionViewController(二) --详解CollectionView各种回调

    UICollectionView的布局是可以自己定义的,在这篇博客中先在上篇博客的基础上进行扩充,我们先使用UICollectionViewFlowLayout,然后好好的介绍一下UICollecti ...

  6. 让自己也能使用Canvas

    <canvas> 是 HTML5 新增的元素,可使用JavaScript脚本来绘制图形.例如:画图,合成照片,创建动画甚至实时视频处理与渲染. 兼容性方面,除了一些骨灰级浏览器IE6.IE ...

  7. Cesium应用篇：3控件（2）BaseLayerPicker

    所有范例均在github中搜索:ExamplesforCesium BaseLayerPicker控件非常简单,似乎没什么可说的,确实非常的简单,但作为一个底图选择控件,可以说是最基本的一个控件. C ...

  8. Node.js 爬虫初探

    前言 在学习慕课网视频和Cnode新手入门接触到爬虫,说是爬虫初探,其实并没有用到爬虫相关第三方类库,主要用了node.js基础模块http.网页分析工具cherrio. 使用http直接获取url路 ...

  9. 认识Java Core和Heap Dump

    什么是Java Core和Heap Dump Java程序运行时,有时会产生Java Core及Heap Dump文件,它一般发生于Java程序遇到致命问题的情况下. 发生致命问题后,Java进程有时 ...

  10. LINQ to SQL语句(12)之Delete和使用Attach

    1.简单形式 说明:调用DeleteOnSubmit方法即可. OrderDetail orderDetail = db.OrderDetails.First (c => c.OrderID = ...