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

写了三级联动

<!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. Eclipse4JavaEE安装Gradle，并导入我们的Gradle项目

    第一步:下载Gradle Gradle下载链接,如下图,下载最新版本即可.下载下来的zip包,解压到一个目录即可,如F盘 第二步:配置环境变量 首先添加GRADLE_HOME,如下图 然后在Path下 ...

  2. vue-router中元信息meta的妙用

    { path:"/test", name:"test", component:()=>import("@/components/test&quo ...

  3. 在Hyper-V上安装RemixOS 的Android模拟器

    不想用实体机,想不想弄个快速的Android虚拟环境,今天我们就来说说把Android模拟器(RemixOS)安到Hyper-v上的办法. 1. 下载RemixOs  或者直接去 论坛获得下载地址 2 ...

  4. 如何利用MongoDB实现高性能，高可用的双活应用架构？

    投资界有一句至理名言——“不要把鸡蛋放在同一个篮子里”.说的是投资需要分解风险,以免孤注一掷失败之后造成巨大的损失. 转发来自 如何利用MongoDB实现高性能,高可用的双活应用架构?http://d ...

  5. 一文了解腾讯云数据库SaaS服务

    本文由云+社区发表 作者:邵宗文,2009年加入腾讯,现为腾讯云数据库专家产品经理.之前曾负责为OMG事业群构建数据库平台,部署,规划及运维支持,为腾讯网,新闻客户端,快报,视频,财经,体育等提供了稳 ...

  6. python3.6+selenium3.13 自动化测试项目实战一(增加自动发送邮件报告接口)

    说明: 继实战项目一的基础上添加自动发送报告邮件接口,代码有部分调整,可以结合实战一和上篇文章学习 变动: 1.增加文本文档SendToUserinfo.txt 用来保存邮件接收者的信息 2.修改测试 ...

  7. JVM之GC算法、垃圾收集算法——标记-清除算法、复制算法、标记-整理算法、分代收集算法

    标记-清除算法 此垃圾收集算法分为“标记”和“清除”两个阶段: 首先标记出所有需要回收的对象,在标记完成后统一回收所有被标记对象,它的标记过程前面已经说过——如何判断对象是否存活/死去 死去的对象就会 ...

  8. JS Bootstrap-DateRangePicker 如何设置默认值为空

    DateRangePicker是一款时间范围选择器,界面良好,非常适合短时间范围选择的插件,具体源码可以在http://www.daterangepicker.com/找到 ,但是目前使用中,感觉功能 ...

  9. 神奇的选择器 :focus-within

    CSS 的伪类选择器和伪元素选择器,让 CSS 有了更为强大的功能. 伪类大家听的多了,伪元素可能听到的不是那么频繁,其实 CSS 对这两个是有区分的. 有个错误有必要每次讲到伪类都提一下,有时你会发 ...

  10. shell脚本获取进程ID并杀死的实现及问题解析

    经常需要杀死某个进程,操作了几次之后,对一个熟练的码农来说,就要制作自己的工具了.有些工具虽然很小,但是却能节省一大部分的时间. 输入某个进程的ID并杀死的方法.这种事情,一般是先搜索再进行优化,这种 ...