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. <meta name="renderer" content="webkit">

    <meta name="renderer" content="webkit"> 当前国内的大部分主流浏览器(如360)基本都是双核浏览器,所谓双核即 ...

  2. cocos2d-x 3.1 编译脚本android-build.py

    写在前面: 前段时间下载了cocos2d-x 3.1,按照官网的教程,配置环境,编译打包,走了一遍,感觉不错,顺便发现其中用了很多python的脚本文件,比如今天要说的android-build.py ...

  3. Python+Selenium2自动化测试之IE、chrome浏览器启动

    构建Python+Selenium2自动化测试环境完成之后,就需要测试支持python的selenium的版本是否都支持在不同浏览器上运行,当前我们分别在三个最通用的浏览器上通过脚本来测试. 1.在I ...

  4. Python 编码为什么那么蛋疼?

    据说,每个做 Python 开发的都被字符编码的问题搞晕过,最常见的错误就是 UnicodeEncodeError.UnicodeDecodeError,你好像知道怎么解决,遗憾的是,错误又出现在其它 ...

  5. leveldb分析——Arena内存管理

    leveldb中实现了一个简单的内存管理工具Arena,其基本思想为:先预先向系统申请一块内存,此后需要申请内存时,直接到预先分配的内存中申请. 那么这样做的目的是什么呢? (1)避免了频率地进行ma ...

  6. TC9.0新增实用接口,用AutoHotkey获取当前选中文件等信息

    TC9.0的history.txt里有几行更新说明(见文章末尾),可以用SendMessage命令获取信息, 消息号是WM_USER+50(即1074),wParam则是更新说明里的内容, 下面是我简 ...

  7. Oracle sql trace用法

    sql_trace是oracle提供的一个非常好的跟踪工具,主要用来检查数据库的异常情况,通过跟踪数据库的活动,找到有问题的语句. 一.概述:    SQL_TRACE是Oracle的一个非常强大的工 ...

  8. 表空间常用sql汇总

    表空间碎片相关:select tablespace_name,       round(sqrt(max(blocks) / sum(blocks)) *             (100 / sqr ...

  9. Beta版本 为什么程序员总是分不清万圣节和圣诞节?因为 Oct 31 == Dec 25。

    Beta版本 软件的测试版本,经常在各类著名软件中的前期发布版本的后缀中可见,包括大名鼎鼎的windows系统,这个阶段的版本一直加入一些新的功能. 软件测试可分为alpha测试.beta测试和联合测 ...

  10. OKEX期现对冲JS源代码分享(基于Fmz, Botvs实现)

    什么是期现对冲?此策略风险和收益如何?期现对冲是利用期货和现货之间存在的差价进行套利.因为在交割日的时候,期货会按现货价格成交,当期货和现货一旦出现差价时,就可以通过做空期货做多现货(或做多期货卖出现 ...