js总结：三级联动
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title>三级联动</title>
</head>
<body>
<select id="sheng">
<option value="">-请选择-</option><!--先创建三个下拉栏，分别对应 省 市 县-->
</select>
<select id="shi">
<option value="">-请选择-</option>
</select>
<select id="xian">
<option value="">-请选择-</option>
</select>
<script>
var osheng=document.getElementById("sheng");
var oshi=document.getElementById("shi");
var oxian=document.getElementById("xian");
var arr_sheng=["陕西省","云南省","四川省","山西省"];<!--创建一个一维数组，存入省的值-->
var arr_shi=[<!--创建一个二维数组，最外层每一个元素对应省-->
["西安市","咸阳市","宝鸡市","渭南市"],<!--数组中的第一个元素内又定义一个数组存的市的值-->
["昆明市","大理市","丽江市","西双版纳市"],
["乐山市","成都市","大同市","高新市"],
["太原市","屏显市","乐宝市","李伟市"]
];
var arr_xian=[<!--创建一个三维数组，最外层每一个元素（对应省）-->
[<!--数组中定义四个数组（对应市）-->
["西安县1","西安县2"],["咸阳市1","咸阳市2"],["宝鸡市1","宝鸡市2"],["渭南市1","渭南市2"]
],<!--数组中定义两个元素（对应县）-->
[
["昆明市1","昆明市2"],["大理市1","大理市2"],["丽江市1","丽江市2"],["西双版纳市1","西双版纳市2"]
],
[
["乐山市1","乐山市2"],["成都市1","成都市2"],["大同市1","大同市2"],["高新市1","高新市2"]
],
[
["太原市1","太原市2"],["屏显市1","屏显市2"],["乐宝市1","乐宝市2"],["李伟市1","李伟市2"]
]
];
var quanju_arr;//创建一个全局对象，用于存储一个中间数组
function input_arr(arr,event){//封装一个函数，用于向下拉栏中添加元素
for(var i=0;i<arr.length;i++){//下拉栏内的元素来源于数组中的元素，遍历数组
var option=new Option(arr[i],i);//创建Option对象（这个O要大写），存入值
event.appendChild(option);//把option添加到event对象的末尾
}
}
input_arr(arr_sheng,osheng);//调用,给省下拉栏添元素
osheng.onchange= function () {//给下拉栏绑定事件（当下拉栏元素改变时执行）
oshi.options.length=1;//当省下拉栏改变时，清空市的下拉栏内元素
oxian.options.length=1;//当省下拉栏改变时，清空县的下拉栏内元素
var index=this.value;//每一个option标签都有一个value值索引，获取索引，用于数组中元素的选择
var arr_shi_next=arr_shi[index];//获取当前选择省的市元素并赋给一个数组
quanju_arr=arr_xian[index];//获取当前选择省中市的县元素并赋给定义的中间数组
input_arr(arr_shi_next,oshi);//调用,给市下拉栏添元素
}
oshi.onchange= function () {
oxian.options.length=1;
var index=this.value;
var arr_xian_next=quanju_arr[index];
input_arr(arr_xian_next,oxian);//调用,给县下拉栏添元素
}
</script>
</body>
</html>
js总结：三级联动的更多相关文章
- QQ JS省市区三级联动
如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title ...
- 从QQ网站中提取的纯JS省市区三级联动
在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动 QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com/js/geo.js <!DOC ...
- JS年月日三级联动下拉框日期选择代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- 原生JS实现三级联动
代码实现 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...
- MVC图片上传详解 IIS (安装SSL证书后) 实现 HTTP 自动跳转到 HTTPS C#中Enum用法小结 表达式目录树 “村长”教你测试用例 引用provinces.js的三级联动
MVC图片上传详解 MVC图片上传--控制器方法 新建一个控制器命名为File,定义一个Img方法 [HttpPost]public ActionResult Img(HttpPostedFile ...
- JS 省市区三级联动
JS 省市区三级联动: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...
- JS省市区三级联动
不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动. 当省市区数据变动是只需调正js即可. 使用方法: <!DOCTYPE html><html>< ...
- 插件 原生js 省市区 三级联动 源码
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- 使用腾讯IP分享计划网站中的纯JS省市区三级联动
JS地址:http://ip.qq.com/js/geo.js 实例如下: <!DOCTYPE html> <html> <head> <title>省 ...
- 引用provinces.js的三级联动
第一次写随笔 应该写的不是太好 请多多见谅 我这次是在网上发现了一个三级联动 也是给新人一个福利 这个是你需要新建个 JavaScript 文件 并复制到你新建的文件里面 var pr ...
随机推荐
- RPM包的版本号比较
版本号表示格式为 epoch:version-release,例如 1:2-3 第一条原则是 rpm 属性优先级 epoch > version > release 两个 r ...
- LeetCode算法题-Contains Duplicate（Java实现）
这是悦乐书的第192次更新,第196篇原创 01 看题和准备 今天介绍的是LeetCode算法题中Easy级别的第52题(顺位题号是217).给定一个整数数组,查找数组是否包含任何重复项.如果数组中至 ...
- Java多线程 Socket使用
点我跳过黑哥的卑鄙广告行为,进入正文. Java多线程系列更新中~ 正式篇: Java多线程(一) 什么是线程 Java多线程(二)关于多线程的CPU密集型和IO密集型这件事 Java多线程(三)如何 ...
- 注册mySQL到JDBC驱动程序方法浅谈
一.注册方法(4种) 1)服务提供者框架: 符合JDBC 4.0规范的驱动程序包含了一个文件META-INF/services/java.sql.Driver,在这个文件中提供了JDBC驱动实现的类名 ...
- 微信小程序多层嵌套循环，二级数组遍历
小程序中的遍历循环类似于angularJS的遍历. 二级数组遍历有一个坑.二级遍历wx:for循环的时候,需要注意.(代码如下) JS代码: data: { groups: [ [ { title: ...
- 详解区块链P2P网络
根据前一篇文章<从微观到宏观理解区块链>我们已经了解到,微观上,区块链本质就是一种不可篡改且可追踪溯源的哈希链条:宏观上,还具备了另外三个基本特征:分布式存储.P2P 网络和共识机制.分布 ...
- iptables snat 和dnat说明
iptables中的snat和dnat是非常有用的,感觉他们二个比较特别,所以单独拿出来说一下. dnat是用来做目的网络地址转换的,就是重写包的目的IP地址.如果一个包被匹配了,那么和它属于同一个流 ...
- Nginx系列一：正向代理和反向代理、Nginx工作原理、Nginx常用命令和升级、搭建Nginx负载均衡
转自https://www.cnblogs.com/leeSmall/p/9351343.html 仅供个人学习 一.什么是正向代理.什么是反向代理 1. 正向代理,意思是一个位于客户端和原始服务器( ...
- docker 11 docker的commit操作
docker commit :表示提交一个容器的副本使之成为新的镜像.假如我们在docker上运行了一个tomcat的容器,对Tomcat容器进行了修改操作,然后我们将修改操作后的tomcat进行co ...
- Emacs 中使用中文插件 eim
在 Emacs 中输入中文,一般用 ibus 一类的输入法也能应付,但来回切换有点麻烦,这里介绍国人写的一个好插件 eim. - 安装 由于在 list-packages 中没有找到这个插件,所以不能 ...