AJAX three-level linkage

Last Update:2018-12-06 Source: Internet

Author: User

Developer on Alibaba Coud: Build your first app with APIs, SDKs, and tutorials on the Alibaba Cloud. Read more ＞

<% @ Page Language = "VB" autoeventwireup = "false" codefile = "default. aspx. VB" inherits = "_ default" %>

<! Doctype HTML public "-// W3C // dtd xhtml 1.0 transitional // en" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<HTML xmlns = "http://www.w3.org/1999/xhtml">
<Head runat = "server">
<Title> untitled page </title>
<Script language = "JavaScript" type = "text/JavaScript">
VaR request;
VaR optionsname;
Inioptions ();

// Initialize the first list box
Function inioptions (){
Optionsname = "OP1 ";
Getnextoptions ("", ""); // initialize the first list box
}

// Create an XMLHTTPRequest object
Function createrequest (){
Try {
Request = new XMLHttpRequest ();
} Catch (trymicrosoft ){
Try {
Request = new activexobject ("msxml2.xmlhttp ");
} Catch (othermicrosoft ){
Try {
Request = new activexobject ("Microsoft. XMLHTTP ");
} Catch (failed ){
Request = false;
}
}
}
If (! Request)
Alert ("error, your browerser can create XMLHttpRequest! ");
}

// send a request to obtain the list data of the next list box
// The ovalue parameter is the selected value of the current list box, this value serves as the parentid Number of the next list box
function getnextoptions (ovalue, roottype) {
createrequest ();
var url = "selecthander. aspx? Parentid = "+ ovalue +" & roottype = "+ roottype;
request. open ("get", URL, true);
request. onreadystatechange = opcallback;
request. send (null);
}

// Callback function
Function opcallback (){
If (request. readystate = 4 ){
If (request. Status = 200 ){
VaR response = request. responsetext; // obtain the JSON string returned by the server
Addoptions (response); // Add Option
// Document. getelementbyid ("Demo"). innerhtml = Response
} Else
Alert ("status is" + request. status );
}
}

// Add Option
Function addoptions (STR ){
VaR jsonobj = STR; // convert a JSON string to a JSON object
VaR opobj = Document. getelementbyid (optionsname );
Clearlaterop ();
VaR S = jsonobj. Split ("| ")

If (S. length> 1) opobj. Disabled = false;

For (I = 0; I <S. length; I ++ ){
JJ = s [I];
Kk = JJ. Split (":");
VaR temoption = New Option (kk [0], kk [1]); // define an option object
// If (I = 0) temoption. Selected = "selected"; // set the first item to "selected"
Opobj [opobj. Length] = temoption; // Add to list
}

}

// clear the list of all current and subsequent options
function clearlaterop () {
var OBJ = document. getelementbyid (optionsname)
var NOP = Number (obj. id. substr (obj. id. length-1, 1);
for (I = NOP; I <= 3; I ++) {
var optemp = document. getelementbyid ("op" + I);
optemp. length = 1;
}< BR >}

// Option onchange event
Function opselectchange (OBJ, roottype ){
OBJ. value = obj. Options [obj. selectedindex]. value;
Optionsname = "op" + (number (obj. id. substr (obj. id. length-1, 1) + 1); // automatically determine the ID of the next option to prepare for adding the option
Getnextoptions (obj. Value, roottype );
}

// Search for products
Function searchproductbyname (){
VaR OBJ = Document. getelementbyid ("OP3 ");
VaR queryvalue = obj. Options [obj. selectedindex]. value; // pageurl
Alert (queryvalue );
Window. Location. href = "\" "+ queryvalue + "\"";
}
</SCRIPT>
</Head>
<Body>
<Form ID = "form1" runat = "server">
<Div>
<Div id = "Demo">
</Div>
<Select name = "OP1" id = "OP1" onchange = "opselectchange (this, 'A')" style = "width: 100px;">
<Option> select catalog </option>
</SELECT>
<Select name = "OP2" id = "OP2" onchange = "opselectchange (this, 'B')" style = "width: 100px;" Disabled = "disabled">
<Option> select subcatalog </option>
</SELECT>
<Select name = "OP3" id = "OP3" style = "width: 100px;" Disabled = "disabled">
<Option> select product </option>
</SELECT>

If (request. querystring ["parentid"]! = NULL & request. querystring ["roottype"]! = NULL)
{
String rootid = request. querystring ["parentid"]. tostring (). Trim ();
String roottype = request. querystring ["roottype"]. tostring (). Trim ();

If (rootid = "" & roottype = "") // when loaded
{
Response. Write ("A: 1 | AA: 2 | AAA: 3 ");
}
Else if (rootid. Trim ()! = "" & Roottype = "A") // when big catalog select
{
Response. Write ("B: 1 | BB: 2 | BB: 3 ");
}
Else if (rootid. Trim ()! = "" & Roottype = "B") // when sub catalog select
{
Response. Write ("C: 1 | CC: 2 | CC: 3 ");
}

}

This article is an English version of an article which is originally in the Chinese language on aliyun.com and is provided for information purposes only. This website makes no representation or warranty of any kind, either expressed or implied, as to the accuracy, completeness ownership or reliability of the article or any translations thereof. If you have any concerns or complaints relating to the article, please send an email, providing a detailed description of the concern or complaint, to info-contact@alibabacloud.com. A staff member will contact you within 5 working days. Once verified, infringing content will be removed immediately.

A Free Trial That Lets You Build Big!

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

Get Started for Free

Sales Support

1 on 1 presale consultation

Chat Contact Sales
After-Sales Support

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

Open a Ticket
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.

Learn More

AJAX three-level linkage

Contact Us

A Free Trial That Lets You Build Big!

Sales Support

After-Sales Support