var oneArr=[['00','成都'],['01','绵阳'],['02','南充']]
var towArr={
'00':[['000','武侯区'],['002','锦江区']],
'01':[['003','游仙区'],['004','涪江区']],
'02':[['005','顺庆区'],['006','高坪区'],['007','嘉陵区']]
}
var threeArr={
'000':[['0','街道1'],['1','街道2'],['2','街道3'],['3','街道4'],['4','街道5']],
'002':[['0','街道11'],['1','街道22'],['2','街道33'],['3','街道44'],['4','街道55']],
'003':[['0','街道21'],['1','街道22'],['2','街道23'],['3','街道24'],['4','街道25']],
'004':[['0','街道22'],['1','街道22'],['2','街道23'],['3','街道24'],['4','街道25']],
'005':[['0','街道31'],['1','街道32'],['2','街道33'],['3','街道34'],['4','街道35']],
'006':[['0','街道32'],['1','街道32'],['2','街道33'],['3','街道34'],['4','街道35']],
'007':[['0','街道331'],['1','街道332'],['2','街道333'],['3','街道334'],['4','街道335']]
}
var one=document.getElementById('one')
var tow=document.getElementById('tow')
var three=document.getElementById('three')
// 一级菜单
var oneNode = eachOption(oneArr)
addOption(one,oneNode)
// 二级菜单
var towNode = eachOption(towArr['00'])
addOption(tow,towNode)
// 三级菜单
var threeNode=eachOption(threeArr['000'])
addOption(three,threeNode)
// 一级菜单事件
one.onchange=function (e) {
var towNode = eachOption(towArr[this.value])
addOption(tow,towNode)
var threeNode = eachOption(threeArr[tow.value])
addOption(three,threeNode)
}
// 二级菜单事件
tow.onchange=function (e) {
var threeNode = eachOption(threeArr[this.value])
addOption(three,threeNode)
}
// 循环选项
function eachOption(arr) {
var op=''
for (let i = 0; i < arr.length ; i++) {
op+='<option value="'+arr[i][0]+'">'+arr[i][1]+'</option>'
}
return op;
}
// 插入选项
function addOption(id,option) {
id.innerHTML=option
}

  

30行代码实现js原生三级联动菜单的更多相关文章

  1. 30 行代码实现 JS 中的 MVC

    一连串的名字走马观花式的出现和更迭,它们中一些已经渐渐淡出了大家的视野,一些还在迅速茁壮成长,一些则已经在特定的生态环境中独当一面舍我其谁.但不论如何,MVC已经并将持续深刻地影响前端工程师们的思维方 ...

  2. 学习 | 基于require.js的三级联动菜单【入门】

    主要目的是学习如何使用require.js AMD就是通过延迟和按需加载来解决各个模块的依赖关系,其中require就是AMD的框架之一 它的优点是可以解决以下问题: JS文件的依赖关系. 通过异步加 ...

  3. JS年月日三级联动下拉框日期选择代码

    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...

  4. js封装的三级联动菜单(使用时只需要一行js代码)

    前言 在实际的项目开发中,我们经常需要三级联动,比如省市区的选择,商品的三级分类的选择等等. 而网上却找不到一个代码完整.功能强大.使用简单的三级联动菜单,大都只是简单的讲了一下实现思路. 下面就给大 ...

  5. 原生JS实现三级联动

    代码实现 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...

  6. MVC图片上传详解 IIS (安装SSL证书后) 实现 HTTP 自动跳转到 HTTPS C#中Enum用法小结 表达式目录树 “村长”教你测试用例 引用provinces.js的三级联动

    MVC图片上传详解   MVC图片上传--控制器方法 新建一个控制器命名为File,定义一个Img方法 [HttpPost]public ActionResult Img(HttpPostedFile ...

  7. 转: javascript实现全国城市三级联动菜单代码

    <html> <head> <title>js全国城市三级联动菜单代码_B5教程网</title> <meta http-equiv=" ...

  8. 30行代码搞定WCF并发性能测试

    [以下只是个人观点,欢迎交流] 30行代码搞定WCF并发性能 轻量级测试. 1. 调用并发测试接口 static void Main()         {               List< ...

  9. QQ JS省市区三级联动

    如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title ...

随机推荐

  1. html5之hash

    http://blog.csdn.net/u012028371/article/details/67636395 原文:https://www.studyscript.com/Post/index/i ...

  2. SpringMVC学习(六)——@InitBinder注解

    有些类型的数据是无法自动转换的,比如请求参数中包含时间类型的数据,无法自动映射到Controller里的Date参数.需要使用@initBinder注解为binder提供一个数据的转换器,这个转换器可 ...

  3. react-native-echarts

    react-native-echarts是react native结合百度echart的图表,集成的一个图表插件. github地址:https://github.com/zhangxinagjunH ...

  4. Python学习---线程基础学习

    线程基础 什么是线程(thread) 线程是CPU调度能够进行运算调度的最小单位.它被包含在进程之中,是进程中的实际运作单位.一条线程指的是进程中一个单一顺序的控制流[换言之,线程就是一堆指令集合], ...

  5. 2维FFT算法实现——基于GPU的基2快速二维傅里叶变换

    上篇讲述了一维FFT的GPU实现(FFT算法实现——基于GPU的基2快速傅里叶变换),后来我又由于需要做了一下二维FFT,大概思路如下. 首先看的肯定是公式: 如上面公式所描述的,2维FFT只需要拆分 ...

  6. python UI自动化实战记录三:pageobject-基类

    脚本思路: 使用pageobject模式,写一个basepage基类,所有页面的通用方法封装到基类中.比如打开页面,关闭页面,等待时间,鼠标移到元素上,获取单个元素,获取一组元素,获取元素的子元素,截 ...

  7. JAVA二叉树递归构造、二叉树普通遍历及递归遍历

    二叉树类: package com.antis.tree; public class BinaryTree { int data; //根节点数据 BinaryTree left; //左子树 Bin ...

  8. UVa 11082 - Matrix Decompressing(最大流)

    链接: https://uva.onlinejudge.org/index.php?option=com_onlinejudge&Itemid=8&page=show_problem& ...

  9. Pollard_rho 因数分解

    Int64以内Rabin-Miller强伪素数测试和Pollard 因数分解的算法实现 选取随机数\(a\) 随机数\(b\),检查\(gcd(a - b, n)\)是否大于1,若大于1则\(a - ...

  10. Linux 统计文件夹,文件数量的命令

    用的最多的就是: ls -l | grep "^-" | wc -l ls -l 普通文件就是以 - 开头,文件夹以 d 开头 grep 后面接正则表达式:^- 以 - 开头的匹配 ...