简单的纯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 ...
随机推荐
- 基于.NET的APP开发和Windows开发,异步回调差别
在Smobiler的开发中,控件或组件及客户端功能都是通过事件或委托来进行处理的. Smobiler是基于异步非阻塞的方式来运行的 下面我们分别对Windows的和Smobiler的MessageBo ...
- 如何通过get,set方法访问到父类的私有属性
刚学习继承的时候,总是会有这样的疑问. 子类继承父类时,会继承所有的非私有的属性和方法.那么在用set方法修改父类的私有属性时,怎么没有报空指针异常呢? 后来仔细想过这个问题,既然没有报空指针,那么在 ...
- 改造断路器集群监控Hystrix Turbine实现自动注册消费者、实时监控多个服务
在上一篇文章中,我们搭建了Hystrix Dashoard,对指定接口进行监控.但是只能对一个接口进行监听,功能比较局限: Turbine:汇总系统内多个服务的数据并显示到 Hystrix Dashb ...
- linux open write lseek的API和应用
1, open #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> int open(c ...
- Windows -- cmd命令: ipconfig 和 nbtstat
1. ipconfig 命令格式及参数如下: 2. nbtstat 命令格式及参数如下:
- NLP第八条
今日!我虽啥也没干,但我还是有着学习的心的~ 也许是“遵义会议”呢 那也说不定 留下这句话再说 哈哈哈哈哈哈 只能抄抄NLP第八条了 谁叫我选了个灰常有意义的通识课咧 八,每一 ...
- 视频直播 object 标签属性详解
最近在做视频直播这一块的,html5的video不能实现此功能,在网上查找了资料,觉得很有用. 一.介绍: 我们要在网页中正常显示flash内容,那么页面中必须要有指定flash路径的标签.也就是OB ...
- Dubbo的@Reference和@Service说明
前言 @Reference 用在消费端,表明使用的是服务端的什么服务 @RestController public class RemoteUserController { @Reference(ve ...
- 磁盘阵列raid类型及含义
raid0: 多块盘同时进行读写: 优点是读写效率高,缺点是没有数据冗余: 最少需要两块盘. raid1: 将数据盘都做镜像: 优点是有数据冗余:缺点是读写效率低,磁盘利用率低: 最少需要两块盘. r ...
- 批量执行工具PSSH详解
批量执行工具PSSH详解 pssh是一个python编写可以在多台服务器上执行命令的工具,同时支持拷贝文件,是同类工具中很出色的,使用必须在各个服务器上配置好密钥认证访问. 安装pssh包 yum 安 ...