基于jquery的三级级联菜单

最新推荐文章于 2024-07-26 03:31:50 发布

最新推荐文章于 2024-07-26 03:31:50 发布 · 219 阅读

文章标签：

#jQuery #Ajax #JSP #XML #应用服务器 #ViewUI

J2EE 专栏收录该内容

5 篇文章

订阅专栏

本文介绍了一种使用jQuery和AJAX实现的用户菜单级联功能。该功能通过动态加载子菜单选项来创建一个多级菜单系统，能够根据用户选择的一级菜单实时更新下级菜单选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

--------- 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;
}