html

<!DOCTYPE html>

<html>

<head>

<meta charset=gbk />

<title>selectList</title>

<style type="text/css">

    *{margin:0;padding:0;}

    .selectList{width:200px;margin:50px auto;}

</style>

<script type="text/javascript" src="jquery1.7.1.js"></script>

</head>

<body>

    <div class="selectList">

        <select class="province">

            <option>请选择</option>

        </select>

        <select class="city">

            <option>请选择</option>

        </select>

        <select class="district">

            <option>请选择</option>

        </select>

    </div>

    <div class="selectList">

        <select class="province">

            <option>请选择</option>

        </select>

        <select class="city">

            <option>请选择</option>

        </select>

        <select class="district">

            <option>请选择</option>

        </select>

    </div>

</body>

</html>

js

   <script type="text/javascript">

    $(function(){

        $(".selectList").each(function(){

            var url = "area.json";

            var areaJson;

            var temp_html;

            var oProvince = $(this).find(".province");

            var oCity = $(this).find(".city");

            var oDistrict = $(this).find(".district");

            //初始化省

            var province = function(){

                $.each(areaJson,function(i,province){

                    temp_html+="<option value='"+province.p+"'>"+province.p+"</option>";

                });

                oProvince.html(temp_html);

                city();

            };

            //赋值市

            var city = function(){

                temp_html = "";

                var n = oProvince.get(0).selectedIndex;

                $.each(areaJson[n].c,function(i,city){

                    temp_html+="<option value='"+city.ct+"'>"+city.ct+"</option>";

                });

                oCity.html(temp_html);

                district();

            };

            //赋值县

            var district = function(){

                temp_html = "";

                var m = oProvince.get(0).selectedIndex;

                var n = oCity.get(0).selectedIndex;

                if(typeof(areaJson[m].c[n].d) == "undefined"){

                    oDistrict.css("display","none");

                }else{

                    oDistrict.css("display","inline");

                    $.each(areaJson[m].c[n].d,function(i,district){

                        temp_html+="<option value='"+district.dt+"'>"+district.dt+"</option>";

                    });

                    oDistrict.html(temp_html);

                };

            };

            //选择省改变市

            oProvince.change(function(){

                city();

            });

            //选择市改变县

            oCity.change(function(){

                district();

            });

            //获取json数据

            $.getJSON(url,function(data){

                areaJson = data;

                province();

            });

        });

    });

    </script>

json文件（area.json）案例数据，自己可自由组织

[

    {"p":"江西省",

    "c":[

        {"ct":"南昌市",

        "d":[

            {"dt":"西湖区"},

            {"dt":"东湖区"},

            {"dt":"高新区"}

        ]},

        {"ct":"赣州市",

        "d":[

            {"dt":"瑞金县"},

            {"dt":"南丰县"},

            {"dt":"全南县"}

        ]}

    ]},

    {"p":"北京",

    "c":[

        {"ct":"东城区"},

        {"ct":"西城区"}

    ]},

    {"p":"河北省",

    "c":[

        {"ct":"石家庄",

        "d":[

            {"dt":"长安区"},

            {"dt":"桥东区"},

            {"dt":"桥西区"}

        ]},

        {"ct":"唐山市",

        "d":[

            {"dt":"滦南县"},

            {"dt":"乐亭县"},

            {"dt":"迁西县"}

        ]}

    ]}

]

转载（http://www.cnblogs.com/afuge/archive/2013/06/08/3127172.html）

jquery-三级联动的更多相关文章

  1. jQuery三级联动效果代码（省、市、区）

    很长时间都不用jquery了,有人问我jquery写三级联动的插件我就写好了发出来吧,正好需要的人都可以看看. 一.html代码 <!DOCTYPE html> <html> ...

  2. jQuery三级联动

    <!DOCTYPE html><html lang="en"><head> <meta charset="UTF-8" ...

  3. jQuery省市区三级联动插件

    体验效果:http://hovertree.com/texiao/bootstrap/4/支持PC和手机移动端. 手机扫描二维码体验效果: 代码如下: <!DOCTYPE html> &l ...

  4. jQuery - 全国省市县三级联动

    最近有空用jquery做了一个全国省市县的三级联动,在以后或许可以用的到 ,遗憾的是我还没用封装,等有空看能不能封装成一个插件 废话不多说,贴上代码: <!doctype html> &l ...

  5. jquery 城市三级联动

    js代码 /*城市三级联动 * @method cityChange * @param allProvince,allCity,allDistrict */ function cityChange(p ...

  6. 简单jquery实现select三级联动

    简单的jquery实现select三级联动 代码如下: <!DOCTYPE html> <html> <head> <meta charset="u ...

  7. jquery select选中表单特效三级联动

    好久没发帖了,今天发一个jquery select的表单三级联动,希望能对有需要的朋友有点帮助. js代码,当然还要加上jquery的包,应该都有的,这里就不发了. <script type=& ...

  8. jquery省市区三级联动

    jquery省市区三级联动(数据来源国家统计局官网)内附源码下载 很久很久没有写博了. 今天更新了项目的省市区三级联动数据,更新后最新的海南三沙都有,分享给所有需要的小伙伴们... JQUERY + ...

  9. jquery+html三级联动下拉框

    jquery+html三级联动下拉框及详情页面加载时的select初始化问题   html写的三个下拉框,如下: <select name="ddlQYWZYJ" id=&q ...

  10. 用php+mysql+ajax+jquery做省市区三级联动

    要求:写一个省市区(或者年月日)的三级联动,实现地区或时间的下拉选择. 实现技术:php ajax 实现:省级下拉变化时市下拉区下拉跟着变化,市级下拉变化时区下拉跟着变化. 使用chinastates ...

随机推荐

  1. bzoj2693--莫比乌斯反演+积性函数线性筛

    推导: 设d=gcd(i,j) 利用莫比乌斯函数的性质 令sum(x,y)=(x*(x+1)/2)*(y*(y+1)/2) 令T=d*t 设f(T)= T可以分块.又由于μ是积性函数,积性函数的约束和 ...

  2. 随机数(random)

    需求 Random rd=new Random(); 需要十以内的随机数  (0---10) System.out.println((int)((rd.nextDouble()*100)/10)); ...

  3. 多线程中的volatile和伪共享

      伪共享 false sharing,顾名思义,“伪共享”就是“其实不是共享”.那什么是“共享”?多CPU同时访问同一块内存区域就是“共享”,就会产生冲突,需要控制协议来协调访问.会引起“共享”的最 ...

  4. SpringMVC的执行流程（二）

    文字解析: 1.客户端发出一个http请求给web服务器,web服务器对http请求进行解析,如果匹配 DispatcherServlet的请求映射路径(在web.xml中指定),web容器将请求转交 ...

  5. CSS常用渐变

    边框渐变: border-image: -webkit-linear-gradient( red , blue) 30 30; border-image: -moz-linear-gradient( ...

  6. observejs改善组件编程体验

    传送门 observejs:https://github.com/kmdjs/observejs 本文演示:http://kmdjs.github.io/observejs/list/ 本文代码:ht ...

  7. 文件缓存（配合JSON数组）

    1.  写入缓存:建立文件夹,把list集合里面的数组转换为JSON数组,存入文件夹2.  读取缓存:把JSON数组从文件夹里面读取出来,然后放入list集合,返回list集合 private fin ...

  8. Bundle包的制作与使用

    一.清爽Bundle模式(在应用工程中创建Bundle的子文件夹,而非在Bundle项目中): 1.新建Bundle包 2.生成Bundle包,并拖入项目中,然后"右键显示包内容" ...

  9. SlidingMenu 侧滑菜单的用法

    很多APP都有侧滑菜单的功能,部分APP左右都是侧滑菜单~SlidingMenu 这个开源项目可以很好帮助我们实现侧滑功能,将侧滑菜单引入项目的方式很多中,先通过例子介绍各种引入方式,然后给大家展示个 ...

  10. 在DBeaver中phoenix查询报错：org.apache.phoenix.exception.PhoenixIOException: The system cannot find the path specified

    环境:Phoenix:4.4,win7系统 问题:Phoenix在查询hbase时,报"系统找不到指定路径". 解决: 请参见 https://distcp.quora.com/C ...