This article introduces the use of the simple ajax instance DropDownList Level 2 linkage function. If you need to know this, please refer to this article.
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. Two-level linkage in the drop-down box:
5. Analyze the XmlHttpRequest object and you can see that the structure of msg. d In the request response data is as follows (by knowing why each element of msg. d has the Text and Value attributes ):