<!DOCTYPE html>

<html>

<head>

<meta charset="utf-8">

<title>selectList</title>

<style type="text/css">

    *{margin:0;padding:0;}

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

</style>

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

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

<style type="text/css">

    .selectList select{

        float:left;

    }

</style>

</head>

<body>

    <div class="selectList">

        <select class="province">

            <option>请选择</option>

        </select>

        <select class="city">

            <option>请选择</option>

        </select>

        <select class="district">

            <option>请选择</option>

        </select>

    </div>

    <script type="text/javascript">

    $(function(){

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

            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();

            });

             province();

        });

    });

    </script>

</body>

</html>

area.js

var areaJson=

[

    {"p":"请选择",

    "c":[

        {"ct":"请选择",

        "d":[

            {"dt":"请选择"},

        ]}

    ]},

    {"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":"迁西县"}

        ]}

    ]}

]

select实现三级联动的更多相关文章

  1. 利用select实现年月日三级联动的日期选择效果

    × 目录 [1]演示 [2]规划 [3]结构生成[4]算法处理 前面的话 关于select控件,可能年月日三级联动的日期选择效果是最常见的应用了.本文是选择框脚本的实践,下面将对日期选择效果进行详细介 ...

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

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

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

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

  4. jQuery实现select三级联动

    参考:jQuery权威指南jQuery初步jQuery选择器jQuery操作domjQuery操作dom事件jQuery插件jQuery操作AjaxjQuery动画与特效jQuery实现导航栏jQue ...

  5. Jquery select 三级联动 (需要JSON数据)

    Scripts/Category.js //Jquery三级类别联动 $(function () { BindCategory(); }) function BindCategory() { var ...

  6. js封装的三级联动菜单(使用时只需要一行js代码)

    前言 在实际的项目开发中,我们经常需要三级联动,比如省市区的选择,商品的三级分类的选择等等. 而网上却找不到一个代码完整.功能强大.使用简单的三级联动菜单,大都只是简单的讲了一下实现思路. 下面就给大 ...

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

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

  8. webForm（三）——三级联动

    三级联动 首先附图一张,初步认识一下什么是三级联动:                           注:选第一个后面两个变,选第二个,最后一个改变. 其次,做三级联动需要注意的方面:①DropD ...

  9. C#三级联动

    1.运用ComboBox的控件建立效果,如右图: 2.建立三个表,第一个Province表: PID,PName;第二个为city表: CId,CName,PId;第三个为coun表:CounID,C ...

随机推荐

  1. mxonline实战11，课程详情页2，课程章节页

    对应github地址:第11天   一. 课程详情页2   1. 课程详情页第2块中的课程介绍中,修改course-detail.html中代码,搜索课程详情,找到如下代码

  2. Java_多线程

    线程(Thread) 1.线程是CPU进行资源调度的最小单位 2.线程是进程实际运行的单位,处理进程中无数的小任务 3.线程共享代码和数据空间 4.一个进程可以并发多个线程,线程之间切换系统开销很小 ...

  3. CSS04--对齐、 布局、导航栏

    我们接着上一章,继续学习一些有关对齐.布局.导航栏的内容. 1.水平块对齐:    1.1 margin:把左和右外边距设置为 auto,规定的是均等地分配可用的外边距.结果就是居中的元素    .c ...

  4. Django-工程搭建

    -----环境安装 1.创建虚拟环境 mkvirtualenv django_py3_1.11 -p python3   2.安装django pip install django==1.11.11 ...

  5. Python unittest第一篇：基础入门+命令行编译

    unittest单元测试框架最初受JUnit启发,与其他语言的主要单元测试框架具有相似的风格. 它支持测试自动化,支持开启或关闭某个测试,支持结合测试.另外它可以生成各个单元测试的报告.为了实现以上功 ...

  6. 利用CompletableFuture优化程序的执行效率

    一.线程池的Future模式 在了解java8的CompletableFuture之前,先通过Future来解决一个问题,看个例子: 假设现在有一个网站,首页有顶部Banner位.左边栏.右边栏.用户 ...

  7. ThinkPHP 5.0.x SQL注入分析

    前言 前段时间,晴天师傅在朋友圈发了一张ThinkPHP 注入的截图.最近几天忙于找工作的事情,没来得及看.趁着中午赶紧搭起环境分析一波.Think PHP就不介绍了,搞PHP的都应该知道. 环境搭建 ...

  8. Redis报错：redis.exceptions.ResponseError: MISCONF Redis is configured to save RDB snap

    首先找到出现错误的原因: redis.exceptions.ResponseError: MISCONF Redis is configured to save RDB snapshots, but ...

  9. 牛顿迭代法（Newton's method）

    关键词:牛顿法.牛顿迭代法.牛顿切线法.牛顿-拉弗森方法 参考:牛顿迭代法-百度百科.牛顿切线法-百度文库数学学院.牛顿切线法数值分析.非线性方程(组)的数值解法.Latex入门 https://bl ...

  10. Visual Studio 跨平台開發實戰(2) - Xamarin.iOS 基本控制項介紹 (转帖)

    前言 在上一篇文章中, 我們介紹了Xamarin 以及簡單的HelloWorld範例, 這次我們針對iOS的專案目錄架構以及基本控制項進行說明. 包含UIButton,, UISlider, UISw ...