30行代码实现js原生三级联动菜单
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原生三级联动菜单的更多相关文章
- 30 行代码实现 JS 中的 MVC
一连串的名字走马观花式的出现和更迭,它们中一些已经渐渐淡出了大家的视野,一些还在迅速茁壮成长,一些则已经在特定的生态环境中独当一面舍我其谁.但不论如何,MVC已经并将持续深刻地影响前端工程师们的思维方 ...
- 学习 | 基于require.js的三级联动菜单【入门】
主要目的是学习如何使用require.js AMD就是通过延迟和按需加载来解决各个模块的依赖关系,其中require就是AMD的框架之一 它的优点是可以解决以下问题: JS文件的依赖关系. 通过异步加 ...
- JS年月日三级联动下拉框日期选择代码
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/ ...
- js封装的三级联动菜单(使用时只需要一行js代码)
前言 在实际的项目开发中,我们经常需要三级联动,比如省市区的选择,商品的三级分类的选择等等. 而网上却找不到一个代码完整.功能强大.使用简单的三级联动菜单,大都只是简单的讲了一下实现思路. 下面就给大 ...
- 原生JS实现三级联动
代码实现 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...
- MVC图片上传详解 IIS (安装SSL证书后) 实现 HTTP 自动跳转到 HTTPS C#中Enum用法小结 表达式目录树 “村长”教你测试用例 引用provinces.js的三级联动
MVC图片上传详解 MVC图片上传--控制器方法 新建一个控制器命名为File,定义一个Img方法 [HttpPost]public ActionResult Img(HttpPostedFile ...
- 转: javascript实现全国城市三级联动菜单代码
<html> <head> <title>js全国城市三级联动菜单代码_B5教程网</title> <meta http-equiv=" ...
- 30行代码搞定WCF并发性能测试
[以下只是个人观点,欢迎交流] 30行代码搞定WCF并发性能 轻量级测试. 1. 调用并发测试接口 static void Main() { List< ...
- QQ JS省市区三级联动
如下图: 首先写一个静态的页面: <!DOCTYPE html> <html> <head> <title>QQ JS省市区三级联动</title ...
随机推荐
- myeclipse 下载 checkstyle 引入后不显示问题
参照这篇博客,http://blog.csdn.net/zzq900503/article/details/42003499 下载最新的checkstyle版本后,在本地导入后一直不显示,步骤什么的也 ...
- 从SuperSocket的App.config中读取配置,并修改保存,再重启服务
string XmlPath = System.Windows.Forms.Application.ExecutablePath + ".config"; XmlDocument ...
- Eclipse版本推荐(tomcat运行项目:web、maven)
1.区别 Eclipse根据特性和jdk版本,从Eclipse官网可看到,分为:Neon/Oxygen/Mars/Luna/Kepler/Juno/Indigo/Helios...等等. Eclips ...
- Nginx能干啥?
Nginx能干的事很多,很强大.官方文档详见点我. Nginx的命令行参数 -? | -h 打印帮助信息 -c file 读取指定配置文件,而不是默认的nginx.conf -g directives ...
- java 开发常用IDE
1.IntelliJ IDEA 2.eclipse 3.netbeans 这三个IDE都不错,据说IntelliJ IDEA最好,主要还是看个人喜好和需要.
- python UI自动化实战记录四:测试页面1-pageobject
该部分记录测试页面1-IndexPage,所有首页上的元素定位.操作.获取属性等方法都写在该类中. 1 首页类继承自BasePage 2 首页类第一部分写的是所有的定位器 3 首页类第二部分类的方法, ...
- Java虚拟机2:Java内存区域
1.几个计算机的概念 为以后写文章考虑,也为巩固自己的知识和一些基本概念,这里要理清楚几个计算机中的概念. 1.计算机存储单位 从小到大依次为位Bit.字节Byte.千字节KB.兆M.千兆GB.TB, ...
- Java实现身份证号码验证源码分享
import java.text.ParseException; import java.text.SimpleDateFormat; import java.util.Calendar; impor ...
- 【[ZJOI2005]午餐】
首先我们得贪心一下,让吃饭时间较长的人排在队首 去抄一段贪心的证明吧 现在研究在一个队伍里的人有什么性质 可以发现道题里也有一个不变量,就是对于队伍里的前\(i\)个人,不管他们排队的顺序如何,\(a ...
- php 统计二维数组中某个相等值的总个数,并且组合成一个新的数组 转发
$ar = array( array( 'sv_id' => 1, 'mid' => 1, 'sv_question1' => 20 ), array( 'sv_id' =& ...