<!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. TOJ 1690 Cow Sorting (置换群)

    Description Farmer John's N (1 ≤ N ≤ 10,000) cows are lined up to be milked in the evening. Each cow ...

  2. 九度oj题目1012：畅通工程

    题目1012:畅通工程 时间限制:1 秒 内存限制:32 兆 特殊判题:否 提交:6643 解决:2863 题目描述: 某省调查城镇交通状况,得到现有城镇道路统计表,表中列出了每条道路直接连通的城镇. ...

  3. 004 java中的变量

    这篇文章为你搞懂三个问题 什么是变量? 如何使用变量? 变量命名有哪些规范? 变量 计算机的内存类似于人的大脑,电脑使用内存来存储计算所需要的数据. 内存像旅馆一样,不同的房间类型对应不同的数据类型, ...

  4. FZU 1921——栀子花开——————【线段树单点更新】

    栀子花开 Time Limit:1000MS     Memory Limit:32768KB     64bit IO Format:%I64d & %I64u Submit Status  ...

  5. Windows映射网络驱动器提示错误

    问题描述:Windows映射网络驱动器的时候,提示文件和打印机共享资源处于联机状态未对连接尝试检测到做出响应 解决方法:不同情况可能不一样,我的原因是,映射的Linux,防火墙处于开启状态,关闭了就可 ...

  6. [转]jQuery Validate使用说明

    本文转自:http://www.cnblogs.com/gimin/p/4757064.html jQuery Validate 导入 js 库 <script src="./jque ...

  7. js控制字符处理

    使用js在对json字符串转json对象时,如果遇到一些控制(特殊)字符会出现转化失败的情况 处理方法:通常我们可以把这些控制字符替换成空 function character(str) { retu ...

  8. FreeSwitch无法启动，提示进程pid锁定的解决方法

    来源:https://stackoverflow.com/questions/12817232/how-do-i-call-a-local-softphone-on-freeswitch error ...

  9. python中操作列表

    1.遍历列表 可以用for循环遍历打印非常实用 摸板: for 临时变量 in 列表 : print(临时变量) 注意缩进 , 注意冒号 2.创建数值列表 (1)使用range()函数 , 函数的范围 ...

  10. ACM-线段树

    http://blog.csdn.net/libin56842/article/details/8530197 基础可以看上面这篇文章 风格: maxn是题目给的最大区间,而节点数要开4倍,确切的说… ...