--------- jsp 部分 ---------
<%@ page language="java" pageEncoding="GBK"%>
<%@ include file="taglibs.jsp" %>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;" />
<title>som用户菜单下拉框级联</title>
<script language="javascript" src="<%=request.getContextPath()%>/script/jquery.js"></script>
<script type="text/javascript">
/** 初始化 */
$(function(){
chengMenu(0);
})
/** 三级菜单的级联 */
var chengMenu = function(m){
var curMenu = $("#menu" + m); //当前菜单
var subMenu = $("#menu" + (m + 1)); //当前菜单的下级菜单
var pid = (curMenu.val() == undefined )? "" : curMenu.val(); //当然菜单val，即菜单id
/** 重置下级和下下级菜单*/
subMenu[0].options.length = 1;
subMenu[0].options.selectedIndex= 0 ;
if(m==1){
$("#menu" + (m + 2))[0].options.length = 1;
$("#menu" + (m + 2))[0].options.selectedIndex= 0 ;
}
//当菜单id为空时就退出，即不用查询下极菜单。
if(m != 0 && pid =="") return;
//ajax获取子菜单数据
$.ajax({
type: "get",
url: "<%=request.getContextPath()%>/menuAuthorityAction.do",
data: "actionType=10&pid=" + pid + "&date=" + new Date(),
dataType: "xml",
success: function(responseXML){
var state = $(responseXML).find("state").text();
if(state == "1"){
$(responseXML).find("option").each(function(){
//alert($(this)[0].tagName + "---"+ $(this).attr("value") + "---"+ $(this)[0].text);
subMenu.append("<option value='" + $(this).attr("value") +"'>" + $(this).text() + "</option>");
});
}else if(state == "0"){
//alert("没有子菜单");
}else if(state == "2"){
alert("网页超时，很重新登录！");
}else if(state == "3"){
alert("服务器错误，请与管理员联系！");
}
},
error:function(s,s1){
alert("网页超时或服务错误，请重新登录或与管理员联系!");
//alert(s1); //错误信息
}
});
}
//测试
var show = function(){
alert($("#menu1").val() + "----" + $("#menu1")[0].options[$("#menu1")[0].selectedIndex].text + "\r\n" +
$("#menu2").val() + "----" + $("#menu2")[0].options[$("#menu2")[0].selectedIndex].text + "\r\n" +
$("#menu3").val() + "----" + $("#menu3")[0].options[$("#menu3")[0].selectedIndex].text);
}
</script>
</head>
<body>
<table><tr>
<td>一级菜单</td>
<td>
<select name="" id="menu1" style="width: 150px;" onchange="chengMenu(1);">
<option value=''>--不限--</option>
</select>
</td>
<td>二级菜单</td>
<td>
<select name="" id="menu2" style="width: 150px;" onchange="chengMenu(2);">
<option value=''>--不限--</option>
</select>
</td>
<td>三级菜单</td>
<td>
<select name="" id="menu3" style="width: 150px;">
<option value=''>--不限--</option>
</select>
</td>
</tr>
</table>
<%--<button onclick="show()">测试</button>
--%>
</body>
</html>
------ action中代码片段 ---------------
/** 用户菜单级联应用。
* @param request
* @return response
* */
public ActionForward somMenu(HttpServletRequest request,
HttpServletResponse response) {
PrintWriter out = null;
String msg = "";
try {
response.setContentType("text/xml;charset=GBK");
response.setHeader("Cache-Control", "no-cache");
out = response.getWriter();
/** 设置父id,如果request中没有参数，则置为０，即表示一级菜单 */
String pid = Toolkit.dealNull(request.getParameter("pid"));
if ("".equals(pid)) {
pid = "0";
}
/** 获取用户id,如果sessionContainer为空或null != sessionContainer中的userId为空，则表示未登录或session失效 */
SessionContainer sessionContainer = (SessionContainer)request.getSession().getAttribute("sessionContainer");
String uid = "";
if(null == sessionContainer || null == sessionContainer.getUserRowId()){
msg = "<state>2</state>";
}else{
uid = sessionContainer.getUserRowId();
List list = menuAccreditUtil.getSomMenu(pid, uid); //获取菜单id和名字的集合
if(list != null && list.size() > 0){
msg = "<state>1</state><options>";
for(Object o : list){
SomMenu sMenu = (SomMenu)o;
msg +="<option value=\"" + sMenu.getMenuId() + "\">" + sMenu.getMenuName() + "</option>";
}
msg += "</options>";
}else{
msg = "<state>0</state>";
}
}
} catch (Exception e) {
e.printStackTrace();
System.out.println("MenuAuthorityAction->somMenu()" + e.toString());
msg = "<state>3</state>";
}finally{
out.write("<?xml version=\"1.0\" encoding=\"GBK\" ?><doc>" + msg + "</doc>");
out.close();
}
return null;
}
分享到：
相关推荐
通过以上步骤，我们可以创建一个高效、响应迅速的三级级联选择系统。这样的功能在实际项目中非常实用，特别是在需要展示层次结构数据或进行多条件筛选的时候。对于学习和理解jQuery和ajax的使用，这个实例是一个很好...
总之，这个Ajax (jQuery) 全国城市三级级联菜单插件利用了Ajax的异步特性，结合jQuery的强大功能，为用户提供了一种流畅的、无需刷新页面的多级选择体验。对于任何需要处理地区选择的网站或应用来说，都是一个实用且...
"基于jQuery的省、市、县三级级联菜单"是一个典型的前端开发案例，它允许用户按照省级、市级和县级顺序逐级选择，提高用户体验的同时也优化了数据提交的效率。以下是对这个主题的详细讲解： 首先，jQuery是一个轻量...
本资源提供了一个“超漂亮的基于jquery的H5省市区县三级地区级联选择菜单”，它专为wap和HTML5页面设计，具有良好的视觉效果和出色的兼容性。 首先，我们要理解什么是jQuery。jQuery是一个快速、简洁的JavaScript库...
引用场景： 国家省市级联菜单、任何二级级联菜单、三级菜单、四级菜单、五.... 使用范例：详细参阅District.Selector.js文件 以国家地理信息为例： $(function () { var District1 = new District("userDistrict",{...
在本案例中，我们讨论的是如何实现一个三级联动的级联菜单，这在数据筛选、地区选择等场景中非常常见。我们将基于AJAX、C#和Visual Studio 2005来实现这一功能。 首先，我们需要了解AJAX（Asynchronous JavaScript ...
在JavaScript的帮助下，我们可以创建复杂的动态下拉菜单，比如三级级联的下拉菜单。这种菜单允许用户逐步导航到深层的选项，使得大量数据的分类和选择更为便捷。 **JavaScript三级下拉菜单的基本原理** JavaScript...
jQuery城市级联插件是一种基于JavaScript库jQuery实现的交互式下拉菜单组件，主要用于处理多级联动选择，例如在网站上实现省、市、区的三级联动选择效果。这种插件能够提供用户友好的界面，使得用户在选择地理位置时...
EasyUI是一个基于jQuery的轻量级JavaScript框架，它提供了一系列易于使用的UI组件，如表格、对话框、菜单等，用于快速构建用户界面。而这里的“级联”指的是当选择某一级（如省份）时，下一级（如城市）会自动更新为...
在这个“SSH+级联菜单应用案例”中，我们将深入探讨如何利用这三个框架来实现一个动态的、具有级联效果的菜单系统。 1. **Struts2框架**：作为MVC（Model-View-Controller）架构的一部分，Struts2负责处理HTTP请求...
在这个场景中，"jquery下拉菜单级联选择地区"指的是使用jQuery库来实现一个三级联动的下拉菜单，分别表示省份、地区和城市，以帮助用户方便地选择他们所在的详细地理位置。 jQuery是一个轻量级、高性能的JavaScript...
在本文中，我们将深入探讨如何使用JSP、JSON和MySQL来实现一个二级级联下拉菜单。这个功能常用于网站的表单设计中，让用户能够从相关联的分类中选择选项，例如省份与城市的选择。 首先，让我们了解这三个技术的核心...
这个名为“JSP+AJAX三级级联及更多级的实现.rar”的压缩包文件，显然是一个关于如何在Web应用中实现多级级联选择功能的教学资源。这种功能常见于地址选择、部门结构展示等场景，用户在一个下拉菜单的选择会影响到下...
在网页开发中，下拉联动...基于jQuery的N级下拉联动能够提供流畅的用户交互，简化多级选择的复杂性。通过理解基本原理和实现步骤，开发者可以根据项目需求灵活地进行扩展和定制，从而满足各种复杂的级联选择场景。
在IT行业中，省市区三级级联代码是一种常见的前端开发需求，尤其在构建具有地理定位功能的网站或应用时。这种级联通常涉及到用户选择省份、城市和区域的过程，这三个级别依次展开，确保用户能准确地指定他们的位置。...
本资源"jQuery基于tnTreeBox.js三级联动菜单多选选中代码.zip"提供了一个实现三级联动菜单并支持多选功能的jQuery代码示例。这个功能在网页设计中十分常见，例如在网站导航、筛选选项或者数据分类中都能找到它的应用...
jQuery城市级联插件是一种基于JavaScript库jQuery实现的交互式选择器，主要用于处理地理位置数据，如省份、城市、区县的三级联动效果。在网页表单中，这种插件能够帮助用户逐步选择地理位置，提高用户体验并减少输入...
通过以上步骤，你可以成功实现一个基于select2的全国省市区三级联动下拉菜单。这个功能在各种需要选择地理位置的场景中都非常实用，例如地址填写、物流配送等。在实际应用中，你可能还需要考虑异步加载数据、错误...
"jq插件库自带下，需要的自行下载"这句话表明这是一个基于jQuery的插件，jQuery是一个广泛使用的JavaScript库，它简化了DOM操作、事件处理、动画以及Ajax交互。这个插件可能包含实现上述三级联动功能所需的代码，...
对于“三级级联”，这通常意味着用户在选择时会经历三个步骤，每个步骤都基于前一步的选择进一步细化。例如，首先选择大类，然后是中类，最后是小类。这种分级方式有助于减少用户在大量选项中寻找的困扰，提升用户...