<!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. flask综合整理1

    前言: 框架的对比 Django:1个重武器,包含了web开发中常用的功能.组件的框架:(ORM.Session.Form.Admin.分页.中间件.信号.缓存.ContenType....): To ...

  2. xshell SSH 连接出现 outgoing encryption ，或者no matching host key algorithm found错误的解决

    首先看看xshell的使用版本,如果是xshell 4,提示的信息为:no matching host key algorithm found 如果是xshell 5,提示的是: outgoing e ...

  3. 【linux相识相知】网络属性配置

    当我们拥有一个崭新的计算机的时候,第一步恐怕都是迫不及待的下载各种软件,看视频,听音乐等,这里的关键的一点是要有网络.现在的个人计算机大部分都是windows操作系统的,接入网络网络很简单,插上网线也 ...

  4. 如何取得GridView被隐藏列的值

    如何取得GridView被隐藏列的值         分类:             ASP.net              2009-06-25 12:47     943人阅读     评论(1 ...

  5. hibernate注解JPA

    1.JPA与hibernate 什么是JPA ? java persistence api :java持久化api,同一的ORM规范,是由sun公司指定的规范接口,hibernate实现了JPA规范. ...

  6. css3轮播渐显效果 2016/11/29

    css3因为其兼容性的问题,被我忽略很久,这次正好做到一个轮播渐显的效果,想了想,正好复习下css3的相关内容,废话不多说,直接上代码. <ul class="cb-slideshow ...

  7. mybatis简单示例

    1.引入mybatis.jar mysql-connector-java-5.1.47.jar <dependency> <groupId>org.mybatis</gr ...

  8. hibernate open session in view 抛出异常解决方法

    在使用open-session-in-view的时候,如果使用不当,有可能抛出两种异常1,NonUniqueObjectException2,在配合spring使用的时候会可能会抛出org.sprin ...

  9. stark——增删改页面

    一.制作添加页面 1.前置准备 (1)修改增删改的视图函数名 class ModelStark(object): def add_view(self, request): return HttpRes ...

  10. 基于forms组件和Ajax实现注册功能

    一.基于forms组件的注册页面设计 1.运用forms组件的校验字段功能实现用户注册 views.py:    (在钩子中代码解耦,将form放在cnblog/blog/Myforms.py中) f ...