After reading the cascade menu made by Daxia, I also made an axe to the class. Hey, it took some time to paste a cascade menu. In this example, the member name is automatically displayed as long as you select the member category name:
First, create a project in eclipse with the name as your own master. Here is Easyjf-menu, and the corresponding browser Page code is:
Easyjf-menu.jsp
<@ Page contentType = "text/html; charser = UTF-8" language = "java" %>
<Head>
........
</Head>
<Script language = "javascript">
Var XMLHttpReq;
Var currentSort;
// Create an xmlhttprequset object
Function createXMLHttpRequest (){
If (window. XMLHttpRequest ){
XMLHttpReq = new XMLHttpRequest ();
}
Else if (window. ActiveXObject ){
Try {
XMlHttpReq = new ActiveXObject ("Msxml2.XMLHTTP ");
} Catch (e ){}
Try {
XMLHttpRequest = new ActiveXObject ("Microsoft. XMLHTTP ");
} Catch (e ){}
}
}
// Send the request Function
Function sendRequest (url ){
CreateXMLHttpRequest ();
XMLHttpReq. open ("GET", url, true );
XMLHttpReq. onreadystatechange = processResponse;
XMLHttpReq. send (null );
}
// Function for processing returned information
Function processResponse (){
If (XMLHttpRequest. readyState = 4 ){
If (XMLHttpRequest. status = 200 ){
UpdateMenu ();
} Else {alert ("the page you requested is abnormal !")}
}
}
// Update the menu Function
Function updateMenu (){
Var res = XMLHttpReq. responseXML. getElementIdByTagName ("res ");
Var sunMenu = "";
For (var I = 0; I <res. length; I ++ ){
Submenu = subMenu + res [1]. fistChild. data + "<br> ";
}
CurrentSort. innerHTML = submenu;
}
// Create a cascading menu
Function showSubMenu (obj ){
CurrentSort = document. getElementById (obj );
CurrentSort. parentNode. style. display = "";
SendRequest ("menu? Sort = "+ obj );
}
</Script>
<B> EasyJF member </B>
<A onClick = "onShowSubMenu ('daxia ')"> Daxia </a>
The corresponding menu is provided for the user to choose from. After the user selects the menu, call the showSubMenu ('xxx') function, the parameter is used to pass the identifier information of the menu selected by the user to the server to determine which menu content of the server is to be obtained. First, the menu recognition information is obtained and then submitted to Ajax, here, the innerHTML attribute is used for positioning and display!
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
