<!DOCTYPE html>

<html lang="en">

<head>

    <meta charset="UTF-8">

    <title>Title</title>

    <style>

    body {

        background: #242424;

        color: green;

        font-size: 20px;

    }

    </style>

</head>

<body>

    <select id="province" size="1" onchange="change(this.value);">

        <option>请选择省份</option>

    </select>

    <select id="city" size="1" onchange="countyChange(this.value);">

        <option>请选择地市</option>

    </select>

    <select id="county" size="1">

        <option>请选择县城</option>

    </select>

    <script type="text/javascript">

    var region = {

        湖南:

        {

            "常德": ["石门", "桃源", "临澧", "汉寿"],

            "益阳": ["益阳1", "益阳2", "益阳3"],

            "岳阳": ["岳阳1", "岳阳2", "岳阳3", "岳阳4", "岳阳5", "岳阳6", "岳阳7"],

            "永州": ["永州1", "永州2"],

            "郴州": ["郴州1", "郴州2", "郴州3"],

            "湘潭": ["湘潭1", "湘潭2", "湘潭3"]

        },

        广东:

        {

            "广州": ["广州1", "广州2", "广州3"],

            "珠海": ["珠海1", "珠海2", "珠海3"],

            "佛山": ["佛山1"]

        }

    }

    var province = document.getElementById("province");

    var city = document.getElementById("city");

    var county = document.getElementById("county");

    //二级联动不用定义你选的省份,直接用省份(key)来决定下面的市(value)值,

    var provinceName = null;

    for (var ele in region) {

        // text:字符串，指定option对象的text属性(即<option></option>之间的文字)

        // value:字符串，指定option对象的value属性

        // defaultSelected:布尔值，指定option对象的defaultSelected属性

        // selected:布尔值，指定option对象的selected属性

        var op = new Option(ele, ele, false, false);

        province.options[province.length] = op;

    }

    var change = function(src)

    {

        city.innerHTML = "";

        for (index in region[src]) {

            var op = new Option(index, index, false, false);

            city.options[city.length] = op;

        }

        //记住你选的省份的值是什么

        provinceName = src;

    }

    var countyChange = function(src2)

    {

        county.innerHTML = "";

        //关键是如何表示:第三级县城的数据:??

        for (index in region[provinceName][src2]) {

            //alert(index);

            var op = new Option(region[provinceName][src2][index], region[provinceName][src2][index], false, false);

            county.options[county.length] = op;

        }

    }

    </script>

    <script src="http://libs.baidu.com/jquery/1.9.1/jquery.min.js"></script>

    <script>

    $(function() {

        $('button').click(function(argument) {

            $('#box').toggle(500);

        });

    });

    </script>

    <script>

    var Things = document.getElementsByTagName('*');

    for (var i = 0; i < Things.length; i++) {

        Things[i].style.backgroundColor = '#242424';

        Things[i].style.color = '#A57800';

    }

    </script>

</body>

</html>

用js写三级联动的更多相关文章

  1. js写三级联动

    <!DOCTYPE HTML> <html> <head> <title>联动菜单</title> <meta charset=&qu ...

  2. QQ JS省市区三级联动

    如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title ...

  3. JS年月日三级联动下拉框日期选择代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. MVC图片上传详解 IIS (安装SSL证书后) 实现 HTTP 自动跳转到 HTTPS C#中Enum用法小结 表达式目录树 “村长”教你测试用例 引用provinces.js的三级联动

    MVC图片上传详解   MVC图片上传--控制器方法 新建一个控制器命名为File,定义一个Img方法 [HttpPost]public ActionResult Img(HttpPostedFile ...

  5. 从QQ网站中提取的纯JS省市区三级联动

    在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动 QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com/js/geo.js <!DOC ...

  6. 原生JS实现三级联动

    代码实现 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...

  7. JS 省市区三级联动

    JS 省市区三级联动: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  8. PHP用ajia代码写三级联动下拉

    下面是我做三级联动下拉的步骤以及逻辑 第一步:先做一个省市区表格 第二步:建个PHP页面显示用我是在<body>里放<div>用来接收要显示的省市区表格信息,里面嵌入jquer ...

  9. JS省市区三级联动

    不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动. 当省市区数据变动是只需调正js即可. 使用方法: <!DOCTYPE html><html>< ...

随机推荐

  1. DB Intro - MongoDB Basic

    mongoDB basic from:http://www.tutorialspoint.com/mongodb prject:https://github.com/chenxing12/l4mong ...

  2. JS识别不同浏览器信息

    总所周知,不同浏览器兼容是不一致的,然而今天我在Coding的时候深深体会到那个痛苦,一样的代码在Firefox里面是没问题的,可以根据索引找到 对应的对象元素然后进行操作,但是同样的却获取不到对象元 ...

  3. mongoDB cpu飙高问题

    问题描述: 最近几天生产环境上的mongodb一直在报警,cpu飙高,其他如内存.iops.连接数.磁盘操作等都正常.通过定位业务,发现是由于mongodb的表其中一个查询未建立索引导致,110多W的 ...

  4. [转]Razor里写函数

    本文转自:http://blog.csdn.net/leftfist/article/details/43243177 asp.net mvc的视图里使用Razor来书写服务器代码,人尽皆知.可以常常 ...

  5. 2、Angular2 Directive

    1.Attribute directives 2.directive的理解

  6. ArrayList集合长度的问题

    // 每次集合中实际包含的元素个数(count)超过了可包含元素的个数capcity  //的时候集合就会向内存中申请多开启一倍的空间,来保证集合长度够用 static void Main(strin ...

  7. javascript 实现函数/方法重载效果

    什么是重载? 在C#和JAVA等编程语言中函数重载是指在一个类中可以定义多个方法名相同但是方法参数和顺序不同的方法,以此来实现不同的功能和操作,这就是重载. JS没有重载,只能模拟重载 一般来说,如果 ...

  8. 一个简单问题引发对IEnumerable和IQueryable的思考

    问题概述:    首先看下图,有客户表和客户负责人表关系是多对多,访问数据库使用的是EF所以这里我们开启了延迟加载,需求就是将每个客户的所有负责人逗号拼接显示在负责人这一栏位, 对你没看错需求就是这么 ...

  9. 【学习笔记】Java中生成对象的5中方法

    概述:本文介绍以下java五种创建对象的方式: 1.用new语句创建对象,这是最常用的创建对象的方式. 2.使用Class类的newInstance方法 3.运用反射手段,调用java.lang.re ...

  10. dubbo-admin网页管理控制台

    由于近段时间在看dubbo,网上找到的这个war包发布到tomcat报错,故从git(https://github.com/apache/incubator-dubbo-ops)上重新下载编译了版本 ...