简单的纯js三级联动
参考这个 日尼禾尔 二级联动
写了三级联动
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>三级城市联动</title>
</head>
<body>
<select id="one" onchange="func(this.value)">
<option value="">-请选择省-</option>
<option value="0">浙江省</option>
<option value="1">广东省</option>
<option value="2">福建省</option>
</select>
<select id="two" onchange="funcc()">
<option value="">-请选择市-</option>
</select> <select id="three" >
<option value="">-请选择区-</option>
</select>
</body> <script>
var two = document.getElementById('two'); city = [];//申明 //定义二级数据
city[0] = ['杭州市'];
city[1] = ['广州市','深圳市'];
city[2] = ['厦门市'];
function func(m){
two.length = 1;
//遍历生产option选项
for (var i = 0; i < city[m].length; i++) { //创建一个option 把数据存储在option
var op = new Option(city[m][i],i); //把带有数据的option 添加到第二个select
two.add(op);
};
} dist=[[]];
dist[0]=[[]];
dist[1]=[[]];
dist[2]=[[]];
//定义三级联动
dist[0][0]=['西湖区'];
dist[1][0]=['天河区','番禺区','越秀区'];
dist[1][1]=['南山区','福田区','罗湖区'];
dist[2][0]=['集美区','思明区'];
var three = document.getElementById('three'); function funcc(){
n=document.getElementById("two").selectedIndex;
three.length = 1;
//遍历生产option选项
m=document.getElementById("one").selectedIndex;
if(m>0) m-=1;
if(n>0)n-=1;
for (var j = 0; j< dist[m][n].length; j++) { //创建一个option 把数据存储在option
var op = new Option(dist[m][n][j],j); //把带有数据的option 添加到第二个select
three.add(op);
};
}
</script>
</html>
简单的纯js三级联动的更多相关文章
- 省市区js三级联动(原创)
看了一些网上的js三级联动,但感觉不是缺这,就是少那,决定亲自操刀写了一个,现记录如下,以备后用! <!DOCTYPE html> <html> <head> &l ...
- 简单jquery实现select三级联动
简单的jquery实现select三级联动 代码如下: <!DOCTYPE html> <html> <head> <meta charset="u ...
- js 三级联动
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...
- js 三级联动 1
<!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...
- 原生js三级联动
<!DOCTYPE html> <html lang="en"> <head> <title> 三级联动 </title> ...
- JS三级联动实例
简单的HTML实例: <h4>选择省</h4> <div class="selectSheng"></div> <select ...
- Js三级联动菜单
效果演示: <SCRIPT LANGUAGE="JavaScript"> <!-- function CreateSelect(_FormName,_SName, ...
- js三级联动
<!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...
- js三级联动效果city-picker
链接:https://pan.baidu.com/s/1NE_EO5_xGvR-y-lboYap7g 提取码:h00e 效果展示: 解决: 动态赋值: 注意:在执行赋值之前,必须执行reset和des ...
随机推荐
- C# ASP.NET MVC:使用Cookie记住账号密码
MVC记住账号密码 使用cookie操作 前端: <div> 用户名:<input type="text" id="UserName" val ...
- SQL server脚本语句积累
1:往现有的表中增加一个字段 IF NOT EXISTS ( SELECT 1 FROM sys.sysobjects so WITH ( NOLOCK ) INNER JOIN sys.syscol ...
- Python基础 列表介绍、使用
第3章 学习目标: 列表是什么以及如何使用列表元素.列表让你能够在一个地方存储成组的信息,其中可以只包含几个元素,也可以包含数百万个元素.列表是新手可直接使用的最强大的Python功能之一,它融合了众 ...
- Android之日志管理(Log)
##文章大纲一.为什么要使用日志管理工具二.日志管理工具实战三.项目源码下载 ##一.为什么要使用日志管理工具###1. 对IT安全至关重要 当您使用强大的日志管理软件自动触发以保护您的系统时,您已 ...
- NPOI插入图片到excel指定单元格
先看效果图 下载NPOI组件(2.0以上支持.xlsx和.xls的excel,2.0以下只支持.xls) NPOI下载官网http://npoi.codeplex.com 下载解压,里面有个dotne ...
- 两篇文章带你走入.NET Core 世界:Kestrel+Nginx+Supervisor 部署上云服务器(二)
背景: 上一篇:两篇文章带你走入.NET Core 世界:CentOS+Kestrel+Ngnix 虚拟机先走一遍(一) 已经交待了背景,这篇就省下背景了,这是第二篇文章了,看完就木有下篇了. 直接进 ...
- java中的伪泛型---泛型擦除(不需要手工强转类型,却可以调用强转类型的方法)
Java集合如Map.Set.List等所有集合只能存放引用类型数据,它们都是存放引用类型数据的容器,不能存放如int.long.float.double等基础类型的数据. 使用反射可以破解泛型T类型 ...
- 从壹开始前后端分离【 .NET Core2.0 +Vue2.0 】框架之十二 || 三种跨域方式比较,DTOs(数据传输对象)初探
更新反馈 1.博友@落幕残情童鞋说到了,Nginx反向代理实现跨域,因为我目前还没有使用到,给忽略了,这次记录下,为下次补充.此坑已填 2.提示:跨域的姊妹篇——<三十三║ ⅖ 种方法实现完美跨 ...
- Django+xadmin打造在线教育平台(一)
目录 在线教育平台(一) 在线教育平台(二) 在线教育平台(三) 在线教育平台(四) 在线教育平台(五) 在线教育平台(六) 在线教育平台(七) 在线教育平台( ...
- Jenkins高级用法 - Pipeline 安装
一.总体介绍 总体介绍内容摘自 玩转Jenkins Pipeline(大宝鱼) 1.核心概念 Pipeline,简而言之,就是一套运行于Jenkins上的工作流框架,将原本独立运行于单个或者多个节点的 ...