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制作二级联动
JS制作二级联动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...
- js:二级联动示例
联动原理 当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息. 省市数据 把省市数据,保存在js文件中,以json形式保存,以便读取 ...
- js省市二级联动实例
//动态创建省市二级联动<!DOCTYPE html><html lang="en"><head> <meta charset=" ...
- 原生js封装二级城市下拉列表
闲的蛋疼,封装了个二级城市下拉 先保证html里有 <select id="province" size=1 > </select> <select ...
- js 实现二级联动
onchange 事件 <body> <select id="province" onchange="func1()"> <opt ...
- js省市二级联动
html: <script src="js/city.js"></script> ...... <body> <div class=&qu ...
- js 省市二级联动
<html> <head> <meta charset="UTF-8"> <title></title> </he ...
- 利用JS实现一个简单的二级联动菜单
前几天在看js的相关内容,所以就简单写了一个二级联动菜单.分享一下. <!DOCTYPE html> <html lang="en"> <head&g ...
随机推荐
- C# Winform窗口之间传值的多种方法浅析(转)
摘要http://www.jb51.net/article/63837.htm 这篇文章主要介绍了C# Winform窗口之间传值的多种方法浅析,本文起讲解了通过构造器传值.通过属性传递.通过事件携带 ...
- iOS 错误 之 Potential leak of an object stored into 'cs'
存储到 “cs”的对象存在潜在的泄露
- Latex 的Table使用multirow and multicolumn
Here are some tips: Use a \multicolumn{1}{|l}{} & \multicolumn{2}{l|}{...} construct; Add anothe ...
- php 显示sqlserver二进制图片
<? header("Content-type:image/ "); // Server in the this format: \ or // , when using a ...
- C#综合揭秘——细说进程、应用程序域与上下文之间的关系
引言 本文主要是介绍进程(Process).应用程序域(AppDomain)..NET上下文(Context)的概念与操作.虽然在一般的开发当中这三者并不常用,但熟悉三者的关系,深入了解其作用,对提高 ...
- Eclipse Sort Members默认之后恢复的方法
alt+shift+s -- > m CRLF 默认一种排序之后,对话框就再也出不来了: 使用这样的方法: window - preference - Java | Java dialogs | ...
- JS-鼠标滚轮事件 和 阻止默认行为
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- CI Weekly #12 | 微信小程序的自动化测试进阶
岁末将至,站在年终冲刺的尾巴上,flow.ci 新增了个人和团队设置的功能: 上线团队功能,注册时默认创建一个与用户名一致的团队,可设置:团队名称.增减团队成员,后续会不断完善: 增加个人设置,可修改 ...
- Kettle(Pentaho)实现web方式远程执行job或transformation
一.背景 公司在用kettle做数据etl,每做完一个job或transformation发布上线想要立即执行看数据效果的话每次都是找运维同学登陆服务器打开kettle找到对应的文件点击执行,整个过程 ...
- CardboardSDK-iOS 源码简单分析
该项目地址: 地址 克隆地址为 https://github.com/rsanchezsaez/CardboardSDK-iOS.git 目前如果想在iOS设备上实现双目VR的功能,Google 已经 ...