二级联动下拉列表菜单的难点在于对后台返回的数据进行解析,不多逼逼,直接上代码

上图是后台返回的数据

实现代码如下:

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实现二级联动下拉列表菜单的更多相关文章

  1. js实现二级联动下拉列表菜单

    二级联动下拉列表菜单的难点在于对后台返回的数据进行解析,不多逼逼,直接上代码 上图是后台返回的数据 实现代码如下: var deviceNotExist = true;//防止数据重复 if(data ...

  2. 原生js封装二级城市下拉列表

    闲的蛋疼,封装了个二级城市下拉 先保证html里有 <select id="province" size=1 > </select> <select ...

  3. JS制作二级联动

    JS制作二级联动 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://ww ...

  4. 原生js写的一个弧形菜单插件

    弧形菜单是一种半弧式或者全弧形菜单,是一种不同于传统横向或者竖向菜单形式的菜单.最近在网上看到好多人写出了这种效果,于是也尝试自己写了一个. 实现方式:原生态js 主要结构: 1.参数合并 var d ...

  5. js:二级联动示例

    联动原理 当用户点击省级的下拉选项,选择所在省,下一个下拉选项里的选项,则变成用户选择省下的所有市的信息,不会出现其它省市的信息. 省市数据 把省市数据,保存在js文件中,以json形式保存,以便读取 ...

  6. 原生JS实现三级联动

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

  7. js省市二级联动实例

    //动态创建省市二级联动<!DOCTYPE html><html lang="en"><head> <meta charset=" ...

  8. 原生JS通过勾股定理计算苹果菜单效果

    JS原生苹果菜单效果 知识点: 勾股定理 a²+b²=c² Event 是一个事件对象,当一个事件发生后,和当前事件发生相关的详细信息会被临时存储到一个指定的地方,也就是event对象,以方便我们在需 ...

  9. js 实现二级联动

    onchange 事件 <body> <select id="province" onchange="func1()"> <opt ...

随机推荐

  1. CGI 和 FastCGI 协议的运行原理

    目录 介绍 深入CGI协议 CGI的运行原理 CGI协议的缺陷 深入FastCGI协议 FastCGI协议运行原理 为什么是 FastCGI 而非 CGI 协议 CGI 与 FastCGI 架构 再看 ...

  2. php cli模式和浏览器访问下加载php.ini文件的注意事项[架构篇]

    使用wampserver或Xampp时,会将配置文件放在一个统一的目录中去调用,这时如果都使用浏览器访问,自然是没有问题的,但是如果换成cli命令行模式运行,则会出现加载了的扩展无法使用的问题. 案例 ...

  3. Django创建和配置文件

    首先我们随便找一个文件 shift+鼠标右键 点击打开 Powershell 窗口 然后输入命令  django-admin startproject 项目名字 输入cd day   进入这个项目下 ...

  4. 机器学习基石笔记:08 Noise and Error

    噪声:误标.对同一数据点的标注不一致.数据点信息不准确...... 噪声是针对整个输入空间的. 存在噪声的情况下,VC bound依旧有用: 存在噪声,就是f------>p(y|x),f是p的 ...

  5. Servlet-生命周期简介

    Servlet生命周期可分为5个步骤 加载Servlet.当Tomcat第一次访问Servlet的时候,Tomcat会负责创建Servlet的实例 初始化.当Servlet被实例化后,Tomcat会调 ...

  6. git 服务器搭建及提交代码检查

    本地 git 服务,通常都会选择 gitlab.本人最先也是选择 gitlab,在 centos7 上按照官网的步骤进行安装,下载的速度难以忍受,无奈放弃.最终选择在 docker 中安装 gogs ...

  7. dotnet new 命令使用模板生成Angular应用

    dotnet new 命令使用模板快速生成单页应用,本文以Angular应用为例. 最新版.NET Core SDK RC4 最大改动是更新了 dotnet new 命令. dotnet new 默认 ...

  8. 【Java基本功】一文读懂final关键字的用法

    本文主要介绍了final关键字的基本使用方法及原理 final关键字可以修饰类.方法和引用. 修饰类,该类不能被继承.并且这个类的对象在堆中分配内存后地址不可变. 修饰方法,方法不能被子类重写. 修饰 ...

  9. Vue + Element UI 实现权限管理系统 前端篇(十):动态加载菜单

    动态加载菜单 之前我们的导航树都是写死在页面里的,而实际应用中是需要从后台服务器获取菜单数据之后动态生成的. 我们在这里就用上一篇准备好的数据格式Mock出模拟数据,然后动态生成我们的导航菜单. 接口 ...

  10. Java 容器源码分析之ConcurrentHashMap

    深入浅出ConcurrentHashMap(1.8) 前言 HashMap是我们平时开发过程中用的比较多的集合,但它是非线程安全的,在涉及到多线程并发的情况,进行put操作有可能会引起死循环,导致CP ...