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

写了三级联动

<!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. JQuery --- 第二期 (jQuery属性操作)

    个人学习笔记 1.JQuery的内容选择器 <!DOCTYPE html> <html lang="en"> <head> <meta c ...

  2. HTML基础系列

    HTML标记语言,网页制作的第一步. 什么是HTML呢?查百度 基础语法 常用标签 HTML是超文本标记语言,HTML不用编译,直接在浏览器中执行,HTML是一个文本文件. HTML基本结构,标签,元 ...

  3. css基础系列

    盒子模型 盒子模型的概念 高和宽的设置 边框的设置 内边距的设置 外边距的设置 盒子的计算 元素显示的方式 盒子模型: border边框,margin外边距,padding内部距,content内容, ...

  4. 前端vue系列-起始篇 vue的基本认知

    hi,大家伙,我是佛系大大,很高兴与你们一起沟通,学习,进步. 很久不更新博客了,现在回来再写博客,尽然是有些怀念的感觉,幸福的感觉.因为写博客,内心会很宁静,沉浸在自己的世界中,是很幸福的一件事.当 ...

  5. 虹软人脸识别ArcFace2.0 Android SDK使用教程

    一.获取SDK 1.进入ArcFace2.0的申请地址 https://ai.arcsoft.com.cn/product/arcface.html 2.填写信息申请并提交 申请通过后即可下载SDK, ...

  6. windows一机多装mysql，5.5+版本，8.0.11版本

      00.安装第一个mysql,压缩版或者安装版,过程省略,目录如下: 运行中输入“regedit” 进入后,找到      HKEY_LOCAL_MACHINE\SYSTEM\CurrentCont ...

  7. PowerShell禁止执行脚本解决方法

    无法加载文件 C:\***.p s1,因为在此系统中禁止执行脚本.有关详细信息,请参阅 "get-help about_signing". 所在位置 行:1 字符: 18 + .\ ...

  8. 吴恩达机器学习笔记58-协同过滤算法（Collaborative Filtering Algorithm）

    在之前的基于内容的推荐系统中,对于每一部电影,我们都掌握了可用的特征,使用这些特征训练出了每一个用户的参数.相反地,如果我们拥有用户的参数,我们可以学习得出电影的特征. 但是如果我们既没有用户的参数, ...

  9. Java实现点击导出excel页面遮罩屏蔽，下载完成后解除遮罩

    一.问题场景 最近在做数据统计功能,需求是导出大数据量的excel,时间间隔较长,大概需要十秒左右,点击导出后,页面没有做任何处理,用户也不知道是否正在导出:如果没有做交互上的限制,用户可以一直点击导 ...

  10. Mac查看和杀死后台进程

    1. Mac 查看后台进程并显示 PID $ jobs -l 2. Mac 端口占用情况(将 port 改成需要查看的端口号,比如 8080) $ lsof -i tcp:port 2. 杀死进程,以 ...