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

写了三级联动

<!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. 项目分层-----MVC

    MVC设计模式:modle层,view层,controller层 以前学习的servlet其实就是一个java类,或者说经过规范的java类,实际进行跳转时,还是要在web.xml文件中配置才能正常跳 ...

  2. DataPipeline加入Linux基金会下OpenMessaging社区

    近日,国内领先的“iPaaS+AI”一站式大数据融合服务提供商DataPipeline宣布加入Linux基金会旗下OpenMessaging开源社区,将与OpenMessaging开源社区其他成员阿里 ...

  3. SQL 高效运行注意事项（二）

    SQL Server高效运行总的来说有两种方式: 一. 扩容,提高服务器性能,显著提高CPU.内存,解决磁盘I/O瓶颈.硬件的提升是立竿见影的,而且是风险小,在硬件更新换代非常快的年代, 当SQLSe ...

  4. libaio.so.1()(64bit) is needed by MySQL-server 问题解决办法

    [root@localhost upload]# rpm -ivh MySQL-server-5.5.25a-1.rhel5.x86_64.rpmerror: Failed dependencies: ...

  5. WebGL绘制有端头的线

    关于WebGL绘制线原理不明白的小伙伴,可以看看我之前的文章WebGL绘制有宽度的线.这一篇我们主要来介绍端头的绘制,先看效果图. 端头一般被称为lineCap,主要有以下三种形式: butt最简单等 ...

  6. pandas 对数据帧DataFrame中数据的增删、补全及转换操作

    1.创建数据帧 import pandas as pd df = pd.DataFrame([[1, 'A', '3%' ], [2, 'B'], [3, 'C', '5%']], index=['r ...

  7. ansible基础-安装与配置

    一 安装 1.1 ansible架构 ansible是一个非常简单的自动化部署项目,由python编写并且开源.用于提供自动化云配置.配置文件管理.应用部署.服务编排和很多其他的IT自动化需求. an ...

  8. [Swift]LeetCode1035.不相交的线 | Uncrossed Lines

    We write the integers of A and B (in the order they are given) on two separate horizontal lines. Now ...

  9. Hadoop系列007-HDFS客户端操作

    title: Hadoop系列007-HDFS客户端操作 date: 2018-12-6 15:52:55 updated: 2018-12-6 15:52:55 categories: Hadoop ...

  10. SQL Server常用函数使用方法（学习）

    1.转载至 https://www.cnblogs.com/Brambling/p/6779434.html Substring()函数,用于截取字符串方法,三个参数 参数1:用于指定要操作的字符串 ...