The main content of this section is to call the page background code method through AJAX to achieve the two-level linkage effect of the drop-down box. The implementation steps are as follows:
1. Create the file Recipe24.aspx and implement the following background code:
// Introduce the namespace
The code is as follows: |
Copy code |
Using System. Web. Services; // Implement the second-level interaction AJAX request loading method in the drop-down box [WebMethod ()] Public static ArrayList GetSubList (string sBuyID) { ArrayList subList = new ArrayList (); If (sBuyID = "1 ") { SubList. Add (new ListItem ("literature", "1 ")); SubList. Add (new ListItem ("children", "2 ")); SubList. Add (new ListItem ("Humanities and Social Sciences", "3 ")); SubList. Add (new ListItem ("technology", "4 ")); } Else if (sBuyID = "2 ") { SubList. Add (new ListItem ("mobile phone communication", "1 ")); SubList. Add (new ListItem ("mobile phone accessories", "2 ")); SubList. Add (new ListItem ("photography", "3 ")); SubList. Add (new ListItem ("digital accessories", "4 ")); } Return subList; } |
2. Implement the page code (HTML part) as follows:
The code is as follows: |
Copy code |
<Body> <Form id = "form1" runat = "server"> <Div align = "center"> <Fieldset style = "width: 400px; height: 150px;"> <Table border = "0" cellpadding = "10" cellspacing = "10"> <Tr> <Td> <Asp: DropDownList ID = "buyList" runat = "server" Width = "120px"> <Asp: ListItem Value = "0" Text = "--- select ---"> </asp: ListItem> <Asp: ListItem Value = "1" Text = ""> </asp: ListItem> <Asp: ListItem Value = "2" Text = "mobile digital"> </asp: ListItem> </Asp: DropDownList> </Td> <Td> <Asp: DropDownList ID = "subList" runat = "server" Width = "120px"> <Asp: ListItem Value = "0" Text = "--- select ---"> </asp: ListItem> </Asp: DropDownList> </Td> </Tr> </Table> </Fieldset> </Div> </Form> </Body> |
3. The script code is as follows:
The code is as follows: |
Copy code |
<Script type = "text/javascript"> $ (Function (){ $ ("# BuyList"). bind ("keyup change", function (e ){ E. preventDefault (); // Initialize $ ("# SubList "). empty (). append ($ ("<option> </option> "). val ("0" pai.html ("--- select ---")); If ($ (this). val ()! = "0 "){ SendData ($ (this). val ()); } }); Function sendData (sBuyID ){ Var loc = window. location. href; $. Ajax ({ Type: "POST ", Url: loc + "/GetSubList", // method for transferring the background page Data: '{"sBuyID": "' + sBuyID + '"}', ContentType: "application/json; charset = utf-8 ", DataType: "json ", Success: function (msg ){ // Msg. d is an array returned by the background array ArrayList. Therefore, each element can be traversed. $. Each (msg. d, function (){ // This. Value and this. Text are attributes of the ListItem type in the ArrayList array returned by the background. $ ("# SubList"). append ($ ("<option> </option" ..val(this.value#.html (this. Text )); }); }, Error: function (){ Alert ("ajax request error "); } }); } }); </Script> |
4. The two-level linkage effect of the drop-down box is as follows:
5. Analyze the XmlHttpRequest object and you can see that the structure of msg. d in the request response data is as follows (the following figure shows why each element of msg. d has the Text and Value attributes ):