--------- 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实现三级级联”的实例中，我们主要探讨如何利用这两种技术来创建一个能够逐级联动的下拉菜单系统，这在数据筛选和表单填写中十分常见，如地区选择、部门分类等场景。 首先，jQuery是一个轻量级...
在本案例中，我们讨论的是使用jQuery库实现的全国城市三级级联菜单插件，它使得用户能够在下拉菜单中选择省份、城市以及区县，以实现快速筛选或输入数据的目的。 首先，jQuery是一个广泛使用的JavaScript库，它简化...
**jQuery 网站导航级联菜单详解** 在网页设计中，导航菜单是至关重要的元素，它帮助用户轻松地在网站各个部分之间穿梭。而级联（或下拉）菜单则进一步增强了用户体验，特别是对于拥有多个层级内容的大型网站。在本...
从给定的文件信息来看，我们正在探讨的主题是“jquery3级级联”，这是一个涉及到JavaScript库JQuery在网页上实现三级下拉菜单级联选择功能的话题。以下是对这个主题的详细解析： ### 1. 什么是3级级联？ 3级级联指...
二级级联菜单意味着主菜单有一个子菜单，而三级级联菜单则在二级的基础上再增加一级子菜单。例如，一个网站的导航栏可能有"产品"这个主菜单，点击后展开显示"电子产品"、"家居用品"等二级子菜单，进一步点击"电子...
在本场景中，jQuery被用来创建一个高效且用户体验良好的城市三级级联下拉菜单。 首先，我们需要理解jQuery的基本用法。jQuery的核心是选择器（Selectors），它们允许我们高效地定位页面上的HTML元素。例如，`$("#id...
总之，".net jquery无刷新级联菜单"是一个实用的前端组件，它结合了.NET的后端处理能力和jQuery的前端交互，实现了高效且流畅的三级菜单选择。对于初学者来说，这是一个很好的学习案例，可以帮助他们理解前后端交互...
"4级级联菜单JQUERY+JSON版"是一个利用JavaScript库jQuery和数据格式JSON实现的多级联动菜单的示例。这个项目主要展示了如何在现代浏览器（如Chrome、Firefox、Opera以及IE11）中创建一个可扩展且功能丰富的四级菜单...
本示例中的".net MVC架构下无刷新三级级联菜单源码"是一个典型的前端与后端交互场景，它展示了如何利用ASP.NET MVC框架以及DropdownList控件来实现一个动态的、无需页面刷新的三级级联菜单。这个菜单的数据是从...
"基于jQuery的省、市、县三级级联菜单"是一个典型的前端开发案例，它允许用户按照省级、市级和县级顺序逐级选择，提高用户体验的同时也优化了数据提交的效率。以下是对这个主题的详细讲解： 首先，jQuery是一个轻量...
`Jquery`，作为一款广泛使用的JavaScript库，提供了强大的功能来创建动态和交互式的导航菜单。本篇将深入探讨如何利用`jQuery 1.8.3`版本实现横排和竖排的下拉菜单，以及在实际项目中的应用。 首先，我们了解`...
首先，"jquery省市区三级级联"涉及到的主要技术是jQuery和JavaScript。jQuery是一个流行的JavaScript库，它简化了DOM操作、事件处理和Ajax交互等任务，使得JavaScript编程更为便捷。在这个项目中，jQuery用于处理...
总结起来，“jquery仿京东二级级联菜单导航”项目涉及了HTML布局、CSS样式和jQuery脚本三方面知识。通过学习和实践这个项目，开发者可以掌握如何创建交互式的、具有下拉效果的导航菜单，这对于提高网站的可用性和...
这里我们讨论的“JQuery写的日期级联下拉菜单”是一个利用jQuery库实现的交互式用户界面组件，允许用户通过三个连续的下拉列表分别选择年、月和日。这种设计使得用户能够快速、准确地输入日期，同时保持页面的简洁性...
本资源提供了一个“超漂亮的基于jquery的H5省市区县三级地区级联选择菜单”，它专为wap和HTML5页面设计，具有良好的视觉效果和出色的兼容性。 首先，我们要理解什么是jQuery。jQuery是一个快速、简洁的JavaScript库...
三级级联下拉框则是指三个互相联动的下拉菜单，当用户在一个下拉框中选择一个选项时，其他关联的下拉框会根据所选选项动态更新其内容。在本教程中，我们将探讨如何使用JavaScript库JQuery来实现这样的功能。 首先，...
三级级联菜单通常指的是在主菜单项下有子菜单，子菜单下还有孙菜单的多级下拉结构。这种设计在大型网站或应用中尤为常见，因为它可以节省页面空间，同时提供层次清晰的导航路径。"简单的三级级联伸缩菜单"可能指的是...
jQuery实现实用的盛市、县三级Select级联菜单，在需要选择全国省份城市的时候，可应用本效果，代码中已包括了全国省市县城市信息，下载后请根据示例页面中的方法，自行调用。再也不用努力的找了，这里就有，哈哈！~~
在ASP.NET中，实现国家省市三级级联菜单是一项常见的需求，尤其在构建具有地域选择功能的网站时。这种级联菜单通常由一个下拉列表触发，用户选择一个国家后，对应的省份列表会自动加载，接着选择省份后，城市列表也...
级联菜单，也称为下拉菜单或嵌套菜单，是一种常见的...通过上述技术，我们可以创建出一个功能完备且易用的全国省市县三级导航级联菜单。在实际应用中，还可以结合后台数据库动态获取数据，提供更灵活的扩展性和维护性。