<HTML>
<Head>
<Meta http-equiv = "Content-Type" content = "text/html; charset = gb2312">
<Meta content = "Amber [hopesoft], http://www.10090.com" name = "author">
<Title> Alibaba Cloud-unlimited linkage menu [Ajax] </title>
<Style type = "text/CSS">
Body, TD
{
Font-family:;
Font-size: 12px;
}
</Style>
<Script language = "JavaScript">
Function getresult (STR, classid)
{
/*
* --------------- Getresult (STR, classid )-----------------
* Getresult (STR)
* Function: send a request through XMLHTTP and return the result.
* Parameter: Str, String, sending condition; classid, number, menu level
* Instance: getresult (document. All. userid. Value, 1 );
* --------------- Getresult (STR, classid )-----------------
*/
// Define the menu level, menu ID array, and menu field array
VaR menuidarr, menufieldarr, menuclass
Menuidarr = new array ()
Menufieldarr = new array ()
Menuclass = 4
Menuidarr [1] = "sel1"
Menuidarr [2] = "sel2"
Menuidarr [3] = "sel3"
Menuidarr [4] = "sel4"
Menufieldarr [1] = "name"
Menufieldarr [2] = "name"
Menufieldarr [3] = "name"
Menufieldarr [4] = "name"
If (window. XMLHttpRequest) {// Mozilla, Safari ,...
Http_request = new XMLHttpRequest ();
} Else if (window. activexobject) {// IE
Http_request = new activexobject ("Microsoft. XMLHTTP ");
}
VaR linkurl = "ajax_server.asp? Classid = "+ classid +" & sel = "+ STR +" & fieldname = "+ menufieldarr [classid + 1]
Http_request.open ("get", linkurl, false );
Http_request.send (null );
// The server processes the returned escape encoded string.
// Display the Server query result on the page
VaR returntxt = Unescape (http_request.responsetext)
If (returntxt. length> 0)
{Document. All, Ajax. innerhtml = "server return result: <font color = 'red'>" + returntxt + "</font> [powered by Ajax]"}
Else
{Document. All, Ajax. innerhtml = ""}
// Return data through XMLHTTP and start to build select.
// Buildsel (returntxt, Eval ("document. All." + menuidarr [classid + 1])
Buildsel (returntxt, document. getelementbyid (menuidarr [classid + 1])
// ============== Change the menu below the lower-level menu to null ====================
VaR KKK
For (kkk = classid + 2; KKK <= menuclass; KKK ++)
{
Submenu = Document. getelementbyid (menuidarr [KKK])
Submenu. Length = 1
Submenu. Options [0]. Selected = true
}
}
Function buildsel (STR, Sel)
{
/*
* --------------- Buildsel (STR, Sel )-----------------
* Buildsel (STR, Sel)
* Function: Build select using Str.
* Parameter: Str, String, returned by the server. It has a specific structure "string 1 |, string 2, string 3"
* It can also be "string 1 serial number | string 1 text, string 2 serial number | string 2 text, string 3 serial number | string 3 text", such
* Parameter: Sel, select to be constructed
* Instance: buildsel (Unescape (obao. responsetext), document. All. sel2)
* --------------- Buildsel (STR, Sel )-----------------
*/
// Clear the original data first.
Sel. Options. Length = 0;
VaR arrstr = new array ();
Arrstr = Str. Split (",");
// Start to build a new select.
Sel. Options. Add (New Option ("----- select -----",""));
If (Str. length> 0)
{
For (VAR I = 0; I <arrstr. length; I ++)
{
// Split the string
VaR subarrstr = new array
Subarrstr = arrstr [I]. Split ("| ")
// Generate a sub-menu
Sel. Options. Add (New Option (subarrstr [1], subarrstr [0]);
}
Sel. Options [0]. Selected = true
}
}
</SCRIPT>
<Form name = "form1" method = "Post" Action = "">
<Table width = "90%" border = "0" align = "center" cellpadding = "2" cellspacing = "1" bgcolor = "# cccccc">
<Tr bgcolor = "f1f1f1">
<TD Height = "24" colspan = "2" align = "center"> Amber infinity linkage menu-Ajax version [hpmenu_ajax V1.0] </TD>
</Tr>
<Tr bgcolor = "# ffffff">
<TD width = "12%" Height = "24" align = "center"> continent: </TD>
<TD> <select name = "sel1" id = "sel1" onchange = "getresult (this. Value, 1)">
<Option value = "" selected> ----- select ----- </option>
<Option value = "10"> Asia </option>
<Option value = "11"> Europe </option>
</SELECT> </TD>
</Tr>
<Tr bgcolor = "# ffffff">
<TD Height = "24" align = "center"> guo jia: </TD>
<TD> <select name = "sel2" id = "sel2" onchange = "getresult (this. Value, 2)">
<Option value = "" selected> ----- select ----- </option>
</SELECT> </TD>
</Tr>
<Tr bgcolor = "# ffffff">
<TD Height = "24" align = "center"> City: </TD>
<TD> <select name = "sel3" id = "sel3" onchange = "getresult (this. Value, 3)">
<Option value = "" selected> ----- select ----- </option>
</SELECT> </TD>
</Tr>
<Tr bgcolor = "# ffffff">
<TD Height = "24" align = "center"> location: </TD>
<TD> <select name = "sel4" id = "sel4">
<Option value = "" selected> ----- select ----- </option>
</SELECT> </TD>
</Tr>
<Tr bgcolor = "f1f1f1">
<TD Height = "24" colspan = "2" align = "center" id = "ajax"> & nbsp; </TD>
</Tr>
</Table>
<Br>
<Table width = "90%" border = "0" align = "center" cellpadding = "0" cellspacing = "0">
<Tr>
<TD Height = "25" align = "Left"> & nbsp; </TD>
</Tr>
<Tr>
<TD Height = "25" align = "Left"> & nbsp; </TD>
</Tr>
<Tr>
<TD Height = "25" align = "Left"> & nbsp; </TD>
</Tr>
<Tr>
<TD Height = "25" align = "Left"> & nbsp; </TD>
</Tr>
<Tr>
<TD Height = "25" align = "Left"> & nbsp; </TD>
</Tr>
<Tr>
<TD Height = "50" align = "center"> & nbsp; </TD>
</Tr>
</Table>
<Script language = "JavaScript">
Getresult (document. getelementbyid ("sel1"). Value, 1)
</SCRIPT>
</Form>
</Body>
</Html>
Source code download: Click to download
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
