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

写了三级联动

<!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. ORM之轻量级框架--Dapper

    一.什么是Dapper? Dapper是一款轻量级Orm框架,它是属于半自动的,它和Entity Framework和NHibernate不同,它只有一个单文件,没有很复杂的配置,如果你喜欢原生Sql ...

  2. Sql Server 复制数据库

    确实很实用 https://www.cnblogs.com/ggll611928/p/7451558.html

  3. Ambari安装HDP问题：User root is not allowed to impersonate anonymous.User: hcat is not allowed to impersonate ambari-qa

    User root is not allowed to impersonate anonymous 修改hadoop 配置文件 etc/hadoop/core-site.xml,加入如下配置项 < ...

  4. .NET Core 2.1来了！

    太棒了! .NET Core 2.0正式发布至今已经过去了大半年,这大半年说长不长说短不短,这段时间里,我是充分地体会到了微软的诚意,那就是认认真真打造一个优秀的开源平台.这大半年的时间里,微软一直在 ...

  5. Window10升级遇到大坑错误代码：0xc000000e完美解决方案

    昨天忽然升级了,然后并没有立即重启更新,因为但是正在工作所以等下班回到家后就是一直提示:文件:\Windows\system32\winload.efi 错误代码:0xc000000e!!! 如下图所 ...

  6. Nginx/LVS/HAProxy 负载均衡软件的优缺点详解

    Nginx/LVS/HAProxy 负载均衡软件的优缺点详解   Nginx/LVS/HAProxy是目前使用最广泛的三种负载均衡软件,本人都在多个项目中实施过,参考了一些资料,结合自己的一些使用经验 ...

  7. JavaScript 执行机制

    一.宏任务与微任务 macro-task(宏任务):包括整体代码script,setTimeout,setInterval micro-task(微任务):Promise,process.nextTi ...

  8. Spring之旅第六篇-事务管理

    一.什么是事务 什么是事务(Transaction)?事务是数据库中的概念,是指访问并可能更新数据库中各种数据项的一个程序执行单元(unit). 有个非常经典的转账问题:A向B转款1000元,A转出成 ...

  9. 通过Jenkins定期清除为None的镜像

    在代码持续交付过程中,依靠Jenkins生产Docker镜像时,会生成许多的名为None的中间镜像,这些镜像在整个项目生产过程完毕后意义不大,还占着空间,需要定期清理,通过手动方式实在是繁琐,也就有了 ...

  10. 实例分析C程序运行时的内存结构

      先验知识 静态变量存储在静态存储区,局部变量存储在动态存储区(栈),代码存放在代码区 寄存器,EBP指向栈底,ESP指向栈顶,EIP指向正在执行指令的下一条指令,三个寄存器中保存的都是地址,32位 ...