网上一些级联菜单通常是客户端数据(就是数据事先定义好),关于动态数据的三级级联菜单很少,今天尝试做了一个
数据库表逻辑很简单 用的Mysql数据库
三张表
学校表 id name
班级表 id name 学校主键
学生表 id name 班级主键
DAO中三个方法
查出所有学校
根据学校id查出相对应的班级
根据班级id查出相对应的学生
POJO类Menu
id name
基本思路
在第一级菜单中(选择学校的) 利用onblur函数(可能有更好的函数,但我不知道。。),调用第一个方法 查出所有的学校,把结果遍历,每循环一次就new一个POJO类,把取出来的id,name存入这个POJO类中,再把POJO类存入List,让相关的Action拿到这个List,把List循环,在每一次取出id和name时,在id与name之间加一条“_”,循环结束后,在结尾加入一个标示用的字符串,最后,再把所有的字符串存入一个新的字符串中,把这个新的字符串输入到前台
前台利用AJAX技术,在创建XMLHttpRequest时,对这个字符串进行拆分,根据标示字符串,把拆分出来相应的name和id写入下拉列表框中,name用于显示,id用于传入下一级菜单的值
这个三级级联菜单到是可以实现功能了,不过做的不是很完美。比如第一次加载时用的JS函数,还有选择某项级联到下一级时,用的是onChange函数,感觉也不是很好。。希望谁能改进改进,做的更好吧。
源码如下
分享到:
相关推荐
在三级级联中,每当用户在一级或二级下拉菜单中做出选择时,会通过ajax发送异步请求到服务器,获取与当前选择对应的三级下拉菜单的选项数据。 具体实现过程如下: 1. **初始化界面**:在`KnowledgeKinds.jsp`中,...
在本项目中,AJAX用于在用户选择上级菜单时,动态加载下一级菜单的内容。 **JSON (JavaScript Object Notation)** 是一种轻量级的数据交换格式,易于人阅读和编写,同时也易于机器解析和生成。在AJAX请求中,服务器...
在这个“ajax+struts2.0+jsp下拉列表级联”的示例中,我们将探讨如何利用这三个技术实现这种功能。 首先,AJAX(Asynchronous JavaScript and XML)是一种在不刷新整个页面的情况下与服务器交换数据并更新部分网页...
Ajax+struts+hibernate实现级联菜单 Ajax+struts+hibernate实现级联菜单 Ajax+struts+hibernate实现级联菜单
当一级菜单发生变化时,该函数会根据用户选择的一级菜单项的值,动态地填充二级菜单选项。具体实现步骤如下: - **初始化子类别数组**:通过遍历数据库查询结果,将每个类别的名称、ID以及其父类别ID存储在一个二维...
在级联菜单中,当用户选择一级菜单时,AJAX会向服务器发送请求,获取与该一级菜单相关的二级菜单数据,并在客户端动态渲染,提供即时反馈。 再者,MySQL是一款流行的开源关系型数据库管理系统,用于存储和管理应用...
在IT领域,动态实现下拉列表框的三级级联查询是一项常见的前端交互功能,它能够为用户提供更加便捷的导航和筛选体验。在这个场景中,我们使用JSP(JavaServer Pages)脚本语言来实现这一功能。JSP是Java平台上的...
首先,需要构建HTML结构,其中包含两个下拉菜单,一个用于显示一级菜单(部门),另一个用于显示根据选中的部门动态获取的二级菜单(子部门)。 ```html <!-- 一级部门列表 --> <option value="0">---请选择--...
在本文中,我们将深入探讨如何使用JSP、JSON和MySQL来实现一个二级级联下拉菜单。这个功能常用于网站的表单设计中,让用户能够从相关联的分类中选择选项,例如省份与城市的选择。 首先,让我们了解这三个技术的核心...
### jsp+ajax实现三级级联 在现代Web开发中,动态加载数据并根据用户的选择进行更新是非常常见的需求。例如,在电商网站上选择省份、城市和区县时,后两个选项会根据前一个选项的选择而变化。这种效果可以通过多种...
在这个案例中,JavaScript被用来处理用户的点击事件,根据用户的选择动态更新下拉菜单,显示相应的国家列表。这可能涉及到AJAX(Asynchronous JavaScript and XML)技术,通过异步方式从服务器获取数据,而无需刷新...
二级下拉菜单初始为空,在一级菜单选择改变时,通过`changelocation`函数动态填充。 3. **事件监听与函数调用**:一级菜单的`onChange`事件触发`changelocation`函数,根据所选一级菜单的ID,筛选出对应的二级菜单...
在IT行业中,级联菜单(Cascading Menu)是一种常见的用户界面元素,它通常用于下拉选择,使得用户能够从一系列相关选项中进行选择。在这个项目中,我们讨论的是使用JSP(JavaServer Pages)和JavaScript来实现一个...
标题中的“三级级联菜单(JS+HTML)”指的是在网页设计中使用JavaScript和HTML实现的具有三级结构的下拉菜单。这种菜单允许用户通过点击主菜单项来展开子菜单,进一步点击子菜单项可以展开更深层次的选项,提供了一种...
综上所述,"SSH + dwr 实现三级级联"是一个结合了传统MVC框架和现代Web通信技术的示例,提高了用户界面的动态性和响应性。通过使用SSH进行后端逻辑处理,DWR进行前后端交互,实现了前端页面的实时更新,使得多级联动...
JavaScript动态级联下拉列表框是一种常见的前端交互设计,它允许用户在选择一个选项后,根据选择的结果动态更新下一个下拉列表框的内容。这种技术在数据筛选、表单填写等场景中广泛应用,能够提高用户体验,减少不必...
在使用JSP JavaScript过程中有很多的技巧与实现,那么如何构建二级级联下拉菜单呢,本文将会向你做一个源码上的介绍。
在这个“JSP+AJAX三级级联及更多级的实现”主题中,我们将深入探讨如何通过这两种技术构建一个能够实现多级联动下拉菜单的系统,这种功能常见于地址选择、部门结构展示等场景。 首先,JSP是Java的一种服务器端脚本...
在网页开发中,"js+ajax实现三级级联" 是一种常见的交互设计,它主要用于下拉选择框(select)的联动效果。这种效果通常应用于地址选择、部门分类等场景,用户在选择第一级后,第二级和第三级的选项会根据前一级的...
本项目"struts+hibernate+ajax级联菜单"结合了这三者,旨在实现一种交互性更强的前端菜单功能。 首先,Struts是一个基于MVC(Model-View-Controller)设计模式的Java Web框架,它主要用于控制应用程序的流程,处理...