二級聯互動菜單，利用了jquery的ajax實現，具體實現如下，喜歡的朋友可以參考下
菜單資源儲存在資料庫中。利用了jquery的ajax實現。用到的包有：json-lib-2.2.3-jdk15.jar ezmorph-1.0.6.jar json.js jquery.js jsp頁面的代碼： 代碼如下:<%@ page contentType="text/html; charset=gbk"%> <%@ taglib prefix="s" uri="/struts-tags"%> <script type="text/javascript" src="js/jquery.js"></script> <script type="text/javascript" src="js/json.js"></script> <% String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + request.getContextPath() + "/"; out.println(basePath); %> <script type="text/javascript"> jQuery(function($){ //alert("ok"); }); function onchangeShow(oneId){ $.ajax({ url : "<%=basePath%>cateJson.whbs", data : {parentId : oneId}, // 參數 type : "post", cache : false, dataType : "json", //返回json資料 error: function(){ alert('error'); }, success:onchangecallback }); } function onchangecallback(data){ document.all['twoId'].options.length = 0; //清空原有的option var str=""; for(var i=0;i<data.length;i++){ str+="<option value='"+data[i].recordId+"'>"+data[i].title+"</option>" } $("#twoId").html(str); } </script> <html> <body> <div align="center"> 請選擇部門類型 <s:select list="rfones" listKey="recordId" listValue="title" name="oneId" theme="simple" id="oneId" value="oneID" onchange="onchangeShow(this.value)"></s:select> 請選擇檔案類型 <s:select list="rftwos" listKey="recordId" listValue="title" name="twoId" theme="simple" id="twoId" value="twoID"></s:select> </div> </body> </html> struts中action的代碼 代碼如下:/** * des:取得二級聯動菜單 * autho:exceljava * date:Nov 20, 2009 * @return * @throws IOException */ public String getJsonCategory() throws IOException{ rfjsons=archiveService.getCategoryByParentID(parentId);//這裡從資料庫取得資料 net.sf.json.JSONArray jsonObj=net.sf.json.JSONArray.fromObject(rfjsons);//組裝成json資料 sendMessage(jsonObj.toString());//向視圖push json資料 return null; } /** * des:封裝發送json格式的資料回js * autho:exceljava * date:Nov 20, 2009 * @param content * @throws IOException */ public void sendMessage(String content) throws IOException{ HttpServletResponse response = ServletActionContext.getResponse(); response.setCharacterEncoding("UTF-8"); response.getWriter().write(content); }Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
