<!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. ebiao 报表工具使用入门

    一.ebiao简价 e表是一个功能强大的Web报表工具,可使复杂报表的设计简单化,避免了大量的复杂SQL编写以及编程来准备数据,报表设计的效率大大提高.e表分为e表 for .NET和e表 for J ...

  2. MySQL 查询多张表中相同字段的最大值

    MySql : 有N张表,N未知,每张表都有一个字段(id),每张表的字段结构不完全一样,如何查询所有表里面所有id的最大值?如下图所示: 对上面三张表进行操作的话,结果应该为:9 SQL语句: se ...

  3. jquery 获取easyui combobox选中的值、赋值

    jquery easyui combobox 控件支持单选和多选 1.获取选中的值 $('#comboboxlist').combobox('getValue');  //单选时 $('#combob ...

  4. 从零开始编译属于你的FFmpeg

    一.前提: 编译FFmpeg可以是初学者,尤其是对C语言项目,Linux编译不熟悉的的初学者的一道门槛. 我曾经找过很多博客,文章,有些能编译成功,有些则不能.编译通过,能够运行也是云里雾里的.其实最 ...

  5. sublime常用设置

    原文地址 https://segmentfault.com/a/1190000002596724 前言 Sublime Text3 在文中简称为ST. ST是个不错的编辑器,我用了有段时间了,所以我觉 ...

  6. HTML代码中<%%>、<%=%>、<%:%>

    <%%>之间可以写服务器端代码 比如 <% for(var i=0;i<10;i++){%> <%=%>获取后台的变量值,比如后台一个session[&quo ...

  7. python unix时间戳

    这是第一次用着python感到怒了,从datetime转化到timestamp数值居然没有直接的函数 直接获取当前时间戳倒是方便: import time timestamp = time.time( ...

  8. PAT 1055 The World's Richest

    #include <cstdio> #include <cstdlib> #include <cstring> #include <vector> #i ...

  9. cf375D. Tree and Queries(莫队)

    题意 题目链接 给出一棵 n 个结点的树,每个结点有一个颜色 c i . 询问 q 次,每次询问以 v 结点为根的子树中,出现次数 ≥k 的颜色有多少种.树的根节点是1. Sol 想到了主席树和启发式 ...

  10. 小米3 无法显示日志 Logcat

    需要ROOT权限 1. 使用文件浏览器进入  /system/etc/init.d/  目录 2.使用文本编辑器打开里面的  01Supertweak 这个文件 在最下面找到   rm /dev/lo ...