原生js实现二级联动下拉列表菜单
二级联动下拉列表菜单的难点在于对后台返回的数据进行解析,不多逼逼,直接上代码
上图是后台返回的数据
实现代码如下:
var deviceNotExist = true;//防止数据重复
if(data.code == 0) { //查询成功
var param = data.content;
for(i = 0; i < param.length; i++) {
deviceNotExist = true;
var detTim = [];
for(j in dev) {
if(param[i].sbbh == dev[j].sbbh) {
deviceNotExist = false;
var period = {
kssj: param[i].kssj,
jssj: param[i].jssj
}
tim[j].push(period);
break;
}
}
if(deviceNotExist) {
var deviceInfo = {
sbbh: param[i].sbbh,
sbmc: param[i].sbmc
}
dev.push(deviceInfo);
var period = {
kssj: param[i].kssj,
jssj: param[i].jssj
}
detTim.push(period);
tim.push(detTim);
}
}
mulArr.push(dev);
mulArr.push(tim);
for(var i = 0; i < mulArr[0].length; i++) {
$("#device").append("<option value=" + mulArr[0][i].sbbh + ">" + mulArr[0][i].sbmc + "</option>");
}
for(var i = 0; i < mulArr[1][0].length; i++) {
$("#period").append("<option value=startTime=" + mulArr[1][0][i].kssj + "&endTime=" + mulArr[1][0][i].jssj + ">" + mulArr[1][0][i].kssj + "-" + mulArr[1][0][i].jssj + "</option>");
}
//选择下拉框列表内容时下面的列表实现联动
$("#device").change(function() {
$("#period").html("");//改变列表值时先清空下面列表的内容
var dIndex = $("#device option:selected").index();//获取当前选中列表的下标
for(var i = 0; i < mulArr[1][dIndex].length; i++) {
$("#period").append("<option value=startTime=" + mulArr[1][dIndex][i].kssj + "&endTime=" + mulArr[1][dIndex][i].jssj + ">" + mulArr[1][dIndex][i].kssj + "-" + mulArr[1][dIndex][i].jssj + "</option>");
}
})
原生js实现二级联动下拉列表菜单的更多相关文章
- js实现二级联动下拉列表菜单
二级联动下拉列表菜单的难点在于对后台返回的数据进行解析,不多逼逼,直接上代码 上图是后台返回的数据 实现代码如下: var deviceNotExist = true;//防止数据重复 if(data ...
- 原生js封装二级城市下拉列表
闲的蛋疼,封装了个二级城市下拉 先保证html里有 <select id="province" size=1 > </select> <select ...
- JS制作二级联动
JS制作二级联动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
- 原生js写的一个弧形菜单插件
弧形菜单是一种半弧式或者全弧形菜单,是一种不同于传统横向或者竖向菜单形式的菜单.最近在网上看到好多人写出了这种效果,于是也尝试自己写了一个. 实现方式:原生态js 主要结构: 1.参数合并 var d ...
- js:二级联动示例
联动原理 当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息. 省市数据 把省市数据,保存在js文件中,以json形式保存,以便读取 ...
- 原生JS实现三级联动
代码实现 <!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF- ...
- js省市二级联动实例
//动态创建省市二级联动<!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- 原生JS通过勾股定理计算苹果菜单效果
JS原生苹果菜单效果 知识点: 勾股定理 a²+b²=c² Event 是一个事件对象,当一个事件发生后,和当前事件发生相关的详细信息会被临时存储到一个指定的地方,也就是event对象,以方便我们在需 ...
- js 实现二级联动
onchange 事件 <body> <select id="province" onchange="func1()"> <opt ...
随机推荐
- CGI 和 FastCGI 协议的运行原理
目录 介绍 深入CGI协议 CGI的运行原理 CGI协议的缺陷 深入FastCGI协议 FastCGI协议运行原理 为什么是 FastCGI 而非 CGI 协议 CGI 与 FastCGI 架构 再看 ...
- php cli模式和浏览器访问下加载php.ini文件的注意事项[架构篇]
使用wampserver或Xampp时,会将配置文件放在一个统一的目录中去调用,这时如果都使用浏览器访问,自然是没有问题的,但是如果换成cli命令行模式运行,则会出现加载了的扩展无法使用的问题. 案例 ...
- Django创建和配置文件
首先我们随便找一个文件 shift+鼠标右键 点击打开 Powershell 窗口 然后输入命令 django-admin startproject 项目名字 输入cd day 进入这个项目下 ...
- 机器学习基石笔记:08 Noise and Error
噪声:误标.对同一数据点的标注不一致.数据点信息不准确...... 噪声是针对整个输入空间的. 存在噪声的情况下,VC bound依旧有用: 存在噪声,就是f------>p(y|x),f是p的 ...
- Servlet-生命周期简介
Servlet生命周期可分为5个步骤 加载Servlet.当Tomcat第一次访问Servlet的时候,Tomcat会负责创建Servlet的实例 初始化.当Servlet被实例化后,Tomcat会调 ...
- git 服务器搭建及提交代码检查
本地 git 服务,通常都会选择 gitlab.本人最先也是选择 gitlab,在 centos7 上按照官网的步骤进行安装,下载的速度难以忍受,无奈放弃.最终选择在 docker 中安装 gogs ...
- dotnet new 命令使用模板生成Angular应用
dotnet new 命令使用模板快速生成单页应用,本文以Angular应用为例. 最新版.NET Core SDK RC4 最大改动是更新了 dotnet new 命令. dotnet new 默认 ...
- 【Java基本功】一文读懂final关键字的用法
本文主要介绍了final关键字的基本使用方法及原理 final关键字可以修饰类.方法和引用. 修饰类,该类不能被继承.并且这个类的对象在堆中分配内存后地址不可变. 修饰方法,方法不能被子类重写. 修饰 ...
- Vue + Element UI 实现权限管理系统 前端篇(十):动态加载菜单
动态加载菜单 之前我们的导航树都是写死在页面里的,而实际应用中是需要从后台服务器获取菜单数据之后动态生成的. 我们在这里就用上一篇准备好的数据格式Mock出模拟数据,然后动态生成我们的导航菜单. 接口 ...
- Java 容器源码分析之ConcurrentHashMap
深入浅出ConcurrentHashMap(1.8) 前言 HashMap是我们平时开发过程中用的比较多的集合,但它是非线程安全的,在涉及到多线程并发的情况,进行put操作有可能会引起死循环,导致CP ...