<!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总结:三级联动的更多相关文章

  1. QQ JS省市区三级联动

    如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title ...

  2. 从QQ网站中提取的纯JS省市区三级联动

    在 http://ip.qq.com/ 的网站中有QQ自己的JS省市区三级联动 QQ是使用引用外部JS来实现三级联动的.JS如下:http://ip.qq.com/js/geo.js <!DOC ...

  3. JS年月日三级联动下拉框日期选择代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. 原生JS实现三级联动

    代码实现 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...

  5. MVC图片上传详解 IIS (安装SSL证书后) 实现 HTTP 自动跳转到 HTTPS C#中Enum用法小结 表达式目录树 “村长”教你测试用例 引用provinces.js的三级联动

    MVC图片上传详解   MVC图片上传--控制器方法 新建一个控制器命名为File,定义一个Img方法 [HttpPost]public ActionResult Img(HttpPostedFile ...

  6. JS 省市区三级联动

    JS 省市区三级联动: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http:/ ...

  7. JS省市区三级联动

    不需要访问后台服务器端,不使用Ajax,无刷新,纯JS实现的省市区三级联动. 当省市区数据变动是只需调正js即可. 使用方法: <!DOCTYPE html><html>< ...

  8. 插件 原生js 省市区 三级联动 源码

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

  9. 使用腾讯IP分享计划网站中的纯JS省市区三级联动

    JS地址:http://ip.qq.com/js/geo.js 实例如下: <!DOCTYPE html> <html> <head> <title>省 ...

  10. 引用provinces.js的三级联动

    第一次写随笔   应该写的不是太好   请多多见谅 我这次是在网上发现了一个三级联动    也是给新人一个福利 这个是你需要新建个 JavaScript 文件  并复制到你新建的文件里面 var pr ...

随机推荐

  1. C语言 矩阵的转置及矩阵的乘法

    C语言 矩阵的转置及矩阵的乘法 //凯鲁嘎吉 - 博客园 http://www.cnblogs.com/kailugaji/ 1.矩阵的转置 #include<stdio.h> #defi ...

  2. [BZOJ 2759] 一个动态树好题

    [BZOJ 2759] 一个动态树好题 题目描述 首先这是个基环树. 然后根节点一定会连出去一条非树边.通过一个环就可以解除根的答案,然后其他节点的答案就可以由根解出来. 因为要修改\(p_i\),所 ...

  3. kafka环境搭建测试

    一.安装 1. 下载:去kafka官网下载:https://www.apache.org/dyn/closer.cgi?path=/kafka/0.9.0.1/kafka_2.11-0.9.0.1.t ...

  4. Python 特殊函数解析(lambda 函数,map 函数,filter 函数,reduce 函数)

    写在之前 今天给大家介绍几个比较特殊的函数,他们具有函数式编程的特点,有人将它们视为 Python 可进行 「函数式编程」 的见证,至于什么是函数式编程,不是本篇文章的重点,感兴趣的可以去了解一下.老 ...

  5. 指数加权移动平均法(EWMA)

    ** 本文内容来自于吴恩达深度学习公开课 1.概述 加权移动平均法,是对观察值分别给予不同的权数,按不同权数求得移动平均值,并以最后的移动平均值为基础,确定预测值的方法.采用加权移动平均法,是因为观察 ...

  6. (二 -3-1) 天猫精灵接入Home Assistant-自动发现Mqtt设备--灯系列 esp8266程序

    设备1 上电自动注册自己是个1个开关 HASS网页和手机APP控制 外部开关上升沿中断控制 天猫精灵语音控制 一键配网 记录以往WIFI信息 设备2 上电后,自动注册自己有三个开关控制 HASS网页和 ...

  7. Linux 分卷压缩

    例如,要将大文件夹 PYNQ 分卷压缩成 1G 的单元大小,如下命令(类似的可以指定 tar 的参数为 czf 而生产 .tar.gz 格式的压缩包:可以指定分卷大小例如 500M 等),压缩完成后, ...

  8. zookeeper的原理,5分钟了解zookeeper

    一 .Zookeeper功能简介 ZooKeeper 是一个开源的分布式协调服务,由雅虎创建,是 Google Chubby 的开源实现.分布式应用程序可以基于 ZooKeeper 实现诸如数据发布/ ...

  9. Luogu P1776 宝物筛选_NOI导刊2010提高(02)(多重背包模版)

    传送门 多重背包板子题, 多重背包就是每种东西有好几个,可以把它拆分成一个一个的01背包 优化:二进制拆分(拆成1+2+4+8+16+...) 比如18=1+2+4+8+3,可以证明18以内的任何数都 ...

  10. Maven入门指南⑦:Maven的生命周期和插件

    一个完整的项目构建过程通常包括清理.编译.测试.打包.集成测试.验证.部署等步骤,Maven从中抽取了一套完善的.易扩展的生命周期.Maven的生命周期是抽象的,其中的具体任务都交由插件来完成.Mav ...