参考这个  日尼禾尔  二级联动

写了三级联动

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

  1. 省市区js三级联动(原创)

    看了一些网上的js三级联动,但感觉不是缺这,就是少那,决定亲自操刀写了一个,现记录如下,以备后用! <!DOCTYPE html> <html> <head> &l ...

  2. 简单jquery实现select三级联动

    简单的jquery实现select三级联动 代码如下: <!DOCTYPE html> <html> <head> <meta charset="u ...

  3. js 三级联动

    <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta http ...

  4. js 三级联动 1

    <!DOCTYPE html> <html> <head> <meta charset="utf-8" /> <title&g ...

  5. 原生js三级联动

    <!DOCTYPE html> <html lang="en"> <head> <title> 三级联动 </title> ...

  6. JS三级联动实例

    简单的HTML实例: <h4>选择省</h4> <div class="selectSheng"></div> <select ...

  7. Js三级联动菜单

    效果演示: <SCRIPT LANGUAGE="JavaScript"> <!-- function CreateSelect(_FormName,_SName, ...

  8. js三级联动

    <!DOCTYPE html><html> <head> <meta charset="UTF-8"> <title>& ...

  9. js三级联动效果city-picker

    链接:https://pan.baidu.com/s/1NE_EO5_xGvR-y-lboYap7g 提取码:h00e 效果展示: 解决: 动态赋值: 注意:在执行赋值之前,必须执行reset和des ...

随机推荐

  1. 基于.NET的APP开发和Windows开发,异步回调差别

    在Smobiler的开发中,控件或组件及客户端功能都是通过事件或委托来进行处理的. Smobiler是基于异步非阻塞的方式来运行的 下面我们分别对Windows的和Smobiler的MessageBo ...

  2. 如何通过get,set方法访问到父类的私有属性

    刚学习继承的时候,总是会有这样的疑问. 子类继承父类时,会继承所有的非私有的属性和方法.那么在用set方法修改父类的私有属性时,怎么没有报空指针异常呢? 后来仔细想过这个问题,既然没有报空指针,那么在 ...

  3. 改造断路器集群监控Hystrix Turbine实现自动注册消费者、实时监控多个服务

    在上一篇文章中,我们搭建了Hystrix Dashoard,对指定接口进行监控.但是只能对一个接口进行监听,功能比较局限: Turbine:汇总系统内多个服务的数据并显示到 Hystrix Dashb ...

  4. linux open write lseek的API和应用

    1, open #include <sys/types.h> #include <sys/stat.h> #include <fcntl.h> int open(c ...

  5. Windows -- cmd命令: ipconfig 和 nbtstat

    1. ipconfig 命令格式及参数如下: 2. nbtstat 命令格式及参数如下:

  6. NLP第八条

    今日!我虽啥也没干,但我还是有着学习的心的~          也许是“遵义会议”呢   那也说不定 留下这句话再说 哈哈哈哈哈哈 只能抄抄NLP第八条了  谁叫我选了个灰常有意义的通识课咧 八,每一 ...

  7. 视频直播 object 标签属性详解

    最近在做视频直播这一块的,html5的video不能实现此功能,在网上查找了资料,觉得很有用. 一.介绍: 我们要在网页中正常显示flash内容,那么页面中必须要有指定flash路径的标签.也就是OB ...

  8. Dubbo的@Reference和@Service说明

    前言 @Reference 用在消费端,表明使用的是服务端的什么服务 @RestController public class RemoteUserController { @Reference(ve ...

  9. 磁盘阵列raid类型及含义

    raid0: 多块盘同时进行读写: 优点是读写效率高,缺点是没有数据冗余: 最少需要两块盘. raid1: 将数据盘都做镜像: 优点是有数据冗余:缺点是读写效率低,磁盘利用率低: 最少需要两块盘. r ...

  10. 批量执行工具PSSH详解

    批量执行工具PSSH详解 pssh是一个python编写可以在多台服务器上执行命令的工具,同时支持拷贝文件,是同类工具中很出色的,使用必须在各个服务器上配置好密钥认证访问. 安装pssh包 yum 安 ...