30行代码实现js原生三级联动菜单

时间:2021-08-22 02:05:10
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. 学习 &vert; 基于require&period;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封装的三级联动菜单&lpar;使用时只需要一行js代码&rpar;

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

  5. 原生JS实现三级联动

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

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

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

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

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

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

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

  9. QQ JS省市区三级联动

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

随机推荐

  1. Java SE、Java EE、Java ME

    Java SE(Java Platform,Standard Edition).Java SE 以前称为 J2SE.它允许开发和部署在桌面.服务器.嵌入式环境和实时环境中使用的 Java 应用程序.J ...

  2. Oracle备份之RMAN

    1.备份:物理备份时文件层次的备份,逻辑备份时数据层次的备份,物理备份为主,逻辑备份作为补充.物理备份分为用户管理备份和RMAN备份,前者使用SQL命令和OS的cp命令进行文件备份,后者使用RMAN工 ...

  3. MongoDB副本集学习&lpar;二&rpar;:基本测试与应用

    简单副本集测试 这一节主要对上一节搭建的副本集做一些简单的测试. 我们首先进入primary节点(37017),并向test.test集合里插入10W条数据: . rs0:PRIMARY> ;i ...

  4. 13---Net基础加强

    更新中,敬请期待............ 作业-复习 程序集1 程序集2 反射1 反射2 反射3 反射4-记事本插件1 反射5-记事本插件2

  5. eclipse同步远程服务器

    eclipse里有一个强大的插件,可以直接在本地编辑远程服务器代码,Eclipse Remote System Explorer (RSE) 下载安装方法: 一.下载,高版本的eclipse可以直接下 ...

  6. &lbrack;javascript&rsqb; visible - 待写

    摘要 jquery 有个筛选器 visible , 一般用于选择 可见元素 $('p:visible') 就是选择可见的 p 元素. 但发现有时候不可用.!!

  7. coding基本功实践

    作为一名程序员,除了需要具备解决问题的思路以外,代码的质量和简洁性也很关键.因为从一个人的代码可以直接看出你的基本功.对于Python而言,这就意味着你需要对Python的内置功能和库有很深入的了解. ...

  8. Java 浮点数相加

    刚刚遇到个需求,需要对金额求和,上线的时候才知道这时个,这个字段是个小数. 随手就改了个Double ,然后,跑下,没啥问题,直接上线了 然后,就fuck 了 加出一大堆的小数,大概是这样的 pack ...

  9. 拦截&dollar;&period;ajax方法实现登录过期登录

    jQuery(function ($) { var CreateLoginWindows = function (callback) { var h = 300; $('#CreateLoginWin ...

  10. 积分之迷-2015决赛C语言B组第一题

    标题:积分之迷 小明开了个网上商店,卖风铃.共有3个品牌:A,B,C. 为了促销,每件商品都会返固定的积分. 小明开业第一天收到了三笔订单: 第一笔:3个A + 7个B + 1个C,共返积分:315 ...