Using jquery Ajax to implement the two Cascade interactive menu _javascript Skills

Source: Internet
Author: User
The menu resource is saved in the database. Leverages the Ajax implementation of jquery. The packages used include: Json-lib-2.2.3-jdk15.jar Ezmorph-1.0.6.jar json.js jquery.js

code for the JSP page:
Copy Code code as follows:

<%@ 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.ge Tcontextpath () + "/";
Out.println (BasePath);
%>

<script type= "Text/javascript" >
JQuery (function ($) {
Alert ("OK");
});
function Onchangeshow (Oneid) {
$.ajax ({
URL: "<%=basepath%>catejson.whbs",
Data: {Parentid:oneid},//Parameters
Type: "Post",
Cache:false,
DataType: "JSON",//return JSON data
Error:function () {
Alert (' Error ');
},
Success:onchangecallback
});
}
function Onchangecallback (data) {
document.all[' twoid '].options.length = 0; Clear the original 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>
<body>
<div align= "center" >
Please select a department type
<s:select list= "Rfones" listkey= "RecordID" listvalue= "title" Name= "Oneid" theme= "simple" id= "Oneid" value= "OneId" Onchange= "Onchangeshow (this.value)" ></s:select>

Please select a file type
<s:select list= "Rftwos" listkey= "RecordID" listvalue= "title" Name= "Twoid" theme= "simple" id= "twoid" value= "TwoId" ></s:select>
</div>
</body>

code for action in Struts
Copy Code code as follows:

/**
* des: Access to level Two linkage menu
* Autho:exceljava
* Date:nov 20, 2009 br>* @return
* @throws ioexception
* *
Public String getjsoncategory () throws ioexception{
Rfjsons= Archiveservice.getcategorybyparentid (ParentID)//Here get the data from the database
Net.sf.json.JSONArray jsonobj= Net.sf.json.JSONArray.fromObject (rfjsons);//assembled into JSON data
SendMessage (jsonobj.tostring ());//push JSON data to view
return null;
}
/**
* des: encapsulating data sent in JSON format back to JS
* Autho:exceljava
* Date:nov, 2009
* @param content * @throws IOException
*/
public void SendMessage (String content) throws ioexception{
Httpservletrespon SE response = servletactioncontext.getresponse ();
Response.setcharacterencoding ("UTF-8");
Response.getwriter (). write (content);

}
Related Article

Contact Us

The content source of this page is from Internet, which doesn't represent Alibaba Cloud's opinion; products and services mentioned on that page don't have any relationship with Alibaba Cloud. If the content of the page makes you feel confusing, please write us an email, we will handle the problem within 5 days after receiving your email.

If you find any instances of plagiarism from the community, please send an email to: info-contact@alibabacloud.com and provide relevant evidence. A staff member will contact you within 5 working days.

A Free Trial That Lets You Build Big!

Start building with 50+ products and up to 12 months usage for Elastic Compute Service

  • Sales Support

    1 on 1 presale consultation

  • After-Sales Support

    24/7 Technical Support 6 Free Tickets per Quarter Faster Response

  • Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.