<!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. NPM, BOWER, GIT, AND BASH PROXY CONFIGURATIONS

    Sources: http://digitaldrummerj.me/proxy-configurations/ When you are using npm, bower, and git behi ...

  2. STL:map用法总结

    一:介绍 map是STL的关联式容器,以key-value的形式存储,以红黑树(平衡二叉查找树)作为底层数据结构,对数据有自动排序的功能.命名空间为std,所属头文件<map> 二:常用操 ...

  3. innosetup卸载软件后，删除定时任务schedule task

    代码如下: //innosetup自带的方法,当卸载软件时,根据卸载的状态改变时而触发 procedure CurUninstallStepChanged(CurUninstallStep: TUni ...

  4. [Activator-HelloAkka] Create our Actors

    So far we have defined our Actor and its messages. Now let's create an instance of this actor. In Ak ...

  5. PHP邮件发送

    php带有内置的mail() 发送邮件函数,但是较为繁琐:建议上网下载一个PHPMailer:

  6. Java入门系列-06-运算符

    这篇文章为你搞懂2个问题 java 中的常用运算符有哪些?如何使用? 这些运算符的运算优先级是怎样的? 算数运算符 明显是做数学运算的,包括以下符号: + 加法运算 敲一敲: public class ...

  7. ajax实现的点击数目加1代码实例

    ajax实现的点击数目加1代码实例:在点击按钮实现数字增加效果代码实例一章节中,介绍如何点击按钮实现数字加1的效果,但是好像并没有什么实际用处,下面就分享一段相对完整的能够在实际应用中派上用场的代码, ...

  8. Java简单验证码原理(源代码+步骤操作)

    本文章一共分为五个步骤,具体操作流程如下: 一.新建名为:CheckCodeServlet的servlet类; 二.复制以下代码到新建的CheckCodeServlet类中,修改自己的包名: pack ...

  9. AngularJS-自定义过滤器 ng-repeat 求和

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

  10. Libxml2 学习

    Libxml2 学习 1.概要 libxml 是一个实现操作XML数据功能的开源C语言库. API参考文档  http://xmlsoft.org/html/libxml-tree.html 2.wi ...