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

写了三级联动

<!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. MySQL查看数据库安装路径

    有时候在我们开发的过程中并不一定记得数据库的安装路径.比如要查看mysql 数据库的安装目录在哪里:我们可以通过mysql命令查看mysql的安装路径: # 以下两个sql任意一个可查询 select ...

  2. spring boot 2.0 Feign的客户端

    1.pom.xml <dependency> <groupId>org.springframework.cloud</groupId> <artifactId ...

  3. CentOS7中搭建cobbler自动装机服务

    一.实验环境 一台centos7 epel源网址 https://fedoraproject.org/wiki/EPEL?rd=Epel 使用nat模式 二.实验步骤 1.下载epel源后进行文件夹挂 ...

  4. 结合JDK源码看设计模式——适配器模式

    定义: 将一个类的接口转换成客户期望的另外一个接口(重点理解适配的这两个字),使得接口不兼容的类可以一起工作适用场景: 已经存在的类,它的方法和需求不匹配的时候 在软件维护阶段考虑的设计模式 详解 首 ...

  5. sql语句 汉字转拼音首字母

    (1)------------------------------------------------------------------------------------------------- ...

  6. 关于web资金系统提现安全保护,防止极快的重复并发请求导致重复提现的解决思路

    关于WEB金融系统中的提现安全问题很多人没有深入思想,导致有漏洞,常常会遇到有些人遇到被攻击到导资金损失的麻烦,     其实要彻底解决重复并发请求 导致重复提现问题,是需要花点心思的,并没有看起来的 ...

  7. react-router详细解释

    react-router的理解 react的一个插件库,专门用来实现一个SPA应用(单页Web应用(single page web application,SPA)整个应用只有一个完整的页面,点击页面 ...

  8. 使用dom4j 解析xml文件

    //使用dom4j 解析xml文件,升级版,dom4j是对dom的封装 //重点 package com.offcn.utils; import java.io.File; import java.i ...

  9. java maven项目update project默认编译器1.5问题解决

    解决办法一:在项目中的pom.xml指定jdk版本,如下 <build> <plugins> <plugin> <groupId>org.apache. ...

  10. Spring Cloud Eureka 你还在让它裸奔吗？？

    前些天栈长在微信公众号Java技术栈分享了 Spring Cloud Eureka 最新版 实现注册中心的实战教程:Spring Cloud Eureka 注册中心集群搭建,Greenwich 最新版 ...