<!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. java多态简单例子

    /* 对象的多态性:动物 x = new 猫(); 函数的多态性:函数重载.重写 1.多态的体现 父类的引用指向了自己的子类对象 父类的引用也可以接收自己的对象 2.多态的前提 必须是类与类之间只有关 ...

  2. html 跨过CSRF验证

    /* CSRF配置 */function csrfSafeMethod(method) { // these HTTP methods do not require CSRF protection r ...

  3. asp ajax

    //[AjaxPro.AjaxMethod()] //public DataTable loadChecked() //{ // return BDAContext.GetObject<ICNP ...

  4. uiautomator 1使用简介

    1.生成build.xml android create uitest-project -n jar_name  -t id -p projectPah 2.修改build.xml 改成默认执行 bu ...

  5. 二、MVC3+EF单表增删改查

    document 表为例 写入静态类 NorthwindDataProvider: Controller可直接调用:如 //获取document表全部数据 NorthwindDataProvider. ...

  6. Cocos2d-x手游技术分享（1）-【天天打蚊子】数据存储与音效篇

    前言: 手游项目<天天打蚊子>终于上线,特地写几篇技术分享文章,分享一下其中使用到的技术,其中使用cocos2d-x引擎,首选平台iOS,也请有iPhone或者iPad的朋友帮忙下载好评. ...

  7. PAT 1042 Shuffling Machine

    #include <cstdio> #include <cstdlib> #include <vector> using namespace std; ] = {' ...

  8. Java集合篇二：LinkList

    package com.test.collection; /** * 自定义实现LinkList * * 1.双向链表 * 实现原理:底层封装Node节点对象(每个节点存放有3部分内容:1.上个节点的 ...

  9. scss-变量作用域

    SCSS之所以便利,是因为它具有了编程语言的某些特性. 让原本规则刻板的CSS变的灵活起来,下面介绍一下SCSS中的作用域概念. 几乎所有编程语言都有作用域概念的涉及,原理大同小异,SCSS中的也是如 ...

  10. Don't forget, a person's greatest emotional need is to feel appreciated.

    Don't forget, a person's greatest emotional need is to feel appreciated.莫忘记,人类情感上最大的需要是感恩.