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. 【PHP系列】框架的抉择

    缘起 在PHP开发中,选择合适的框架有助于加快软件开发,节约宝贵的项目时间,让开发者专注于功能的实现上.框架的问题是需要很多的投入,选择框架时,我们更看重这个框架的未来,存在多年的大型框架必须要有好的 ...

  2. 在 Linux 中使用 Azure Premium 存储的基本优化指南

    Note 以下测试和结果都是基于 CentOS 6.5.对于其他版本,请参考本文档,并自行进行相关测试. 建议使用最新的内核版本 一般情况下,新的内核版本能解决老版本中存在的问题,添加对新出现硬件的支 ...

  3. 【转】关于色彩空间sRGB和Adobe RGB...

    以前对这个问题一直很困惑.... 下面采用问答形式.A:相机中的SRGB和ADOBE RGB有什么区别 ADOBE貌似颜色淡.什么时候有用处呢? B:不是这样的,ADOBE RGB的色域要比SRGB要 ...

  4. xtrabackup在线迁移mysql并搭建为主主同步

    一.背景 工作中有需求数据库需要迁移,但是不能停服,不能锁库锁表影响业务的正常运行,所以使用XtraBackup 二.环境: 操作系统:CentOS Linux release 7.4.1708 (C ...

  5. 高性能计算 GPU 等资料

    从石油领域的应用看GPU.CPU算法效果比较  http://www.csdn.net/article/2011-06-21/300207 HPC 论坛 http://hpcbbs.it168.com ...

  6. selenium+java项目实战---百度输入框

    最近对java+selenium+testng+maven 做一个小项目的总结,并对工作中的框架在做一些小总结,大概目录为: 1.项目实战--百度登录输入框 2.项目的二次封装 3.框架分层,及po模 ...

  7. poj1322 Chocolate 【 概率DP 】

    题目链接:poj1322 Chocolate [概率DP ] 题意:袋中有C种颜色巧克力,每次从其中拿出一块放桌上,如果桌上有两块相同颜色巧克力则吃掉,问取出N块巧克力后,求桌上正好剩下M块巧克力的概 ...

  8. 2018 Multi-University Training Contest 4 Problem L. Graph Theory Homework 【YY】

    传送门:http://acm.hdu.edu.cn/showproblem.php?pid=6343 Problem L. Graph Theory Homework Time Limit: 2000 ...

  9. ASP.NET Web API编程——客户端调用

    可以使用HttpClient这个调用Web API,下面是HttpClient的定义,列举了一些常用的方法,其中还有一些没有列举,包括重载的方法. public class HttpClient : ...

  10. 智能门锁超低功耗:SI522(13.56芯片)替代MFRC522\FM17522

    SI522(超低功耗13.56M芯片)替代RC522 完全兼容 PIN对PIN,同时也替代FM17522. MF RC522 是应用于13.56MHz 非接触式通信中高集成度读写卡系列芯片中的一员.是 ...