JQuery JSON implementation of three-level linkage examples

Copy codeThe Code is as follows: <asp: DropDownList ID = "ddl1" runat = "server" Width = "100px"> </asp: DropDownList>
<Asp: DropDownList ID = "ddl2" runat = "server" Width = "100px"> </asp: DropDownList>
<Asp: DropDownList ID = "ddl3" runat = "server" Width = "100px"> </asp: DropDownList>

Js:Copy codeThe Code is as follows: <script src = "js/jquery-1.4.2.min.js" type = "text/javascript"> </script>
<Script type = "text/javascript">
$ (Document). ready (function (){
GetA ();
$ ("# Ddl1"). change (function () {GetB ();});
$ ("# Ddl2"). change (function () {GetC ();});
});
Function GetA ()
{
$ ("# Ddl1" ).html ("");
$ ("# Ddl1"). append ("<option value = '-1' selected = 'selected'> Select... </option> ");
// $ ("Select [name $ = ddl1]> option: selected"). remove ();
Var strId = 0;
$. GetJSON ("LoadClass. ashx? DdlId = "+ strId, function (data ){
For (var I = 0; I <data. length; I ++ ){
$ ("Select [name $ = ddl1]"). append ($ ("<option> </option>" 2.16.val(dataworkflow iworkflow .id).html (data [I]. Cname ));
};
GetB ();
});
}
Function GetB ()
{
$ ("# Ddl2" ).html (""); $ ("# ddl3" ).html ("");
Var strId = $ ("# ddl1"). attr ("value ");
If (strId! = 0 ){
$. GetJSON ("LoadClass. ashx? DdlId = "+ strId, function (data ){
For (var I = 0; I <data. length; I ++ ){
$ ("Select [name $ = ddl2]"). append ($ ("<option> </option>" 2.16.val(dataworkflow iworkflow .id).html (data [I]. Cname ));
};
GetC ();
});
}
}
Function GetC ()
{
$ ("# Ddl3" ).html ("");
Var strId = $ ("# ddl2"). attr ("value ");
If (strId! = 0 ){
$. GetJSON ("LoadClass. ashx? DdlId = "+ strId, function (data ){
For (var I = 0; I <data. length; I ++ ){
$ ("Select [name $ = ddl3]"). append ($ ("<option> </option>" 2.16.val(dataworkflow iworkflow .id).html (data [I]. Cname ));
};
});
}
}
</Script>

LoadClass. ashx:Copy codeThe Code is as follows: <% @ WebHandler Language = "C #" Class = "LoadClass" %>
Using System;
Using System. Web;
Using System. Text;
Using System. Data;
Public class LoadClass: IHttpHandler {
Public void ProcessRequest (HttpContext context ){
// Array [{"ID": "275", "Cname": "A1" },{ "ID": "319", "Cname": "A2 "}, {"ID": "322", "Cname": "A3"}]
Int strId = Convert. ToInt32 (context. Request ["ddlId"]);
String strSQL = "select * from Class where parent_Ptr =" + strId + "order by classOrder asc ";
Db d = new db ();
DataTable dt = d. getDT (strSQL );
StringBuilder strClass = new StringBuilder ();
If (dt! = Null)
{
StrClass. Append ("[");
For (int I = 0; I <dt. Rows. Count; I ++)
{
StrClass. Append ("{");
StrClass. Append ("\" ID \ ": \" "+ dt. Rows [I] [" id "]. ToString () + "\",");
StrClass. Append ("\" Cname \ ": \" "+ dt. Rows [I] [" classCname "]. ToString () + "\"");
If (I! = Dt. Rows. Count-1)
{
StrClass. Append ("},");
}
}
}
StrClass. Append ("}");
StrClass. Append ("]");
Context. Response. ContentType = "application/json ";
Context. Response. ContentEncoding = Encoding. UTF8;
Context. Response. Write (strClass. ToString ());
Context. Response. End ();
}
Public bool IsReusable {
Get {
Return false;
}
}
}

Note:Copy codeThe Code is as follows: // only the value can be obtained in the background, and text cannot be obtained directly. It must be relayed through js and controls.
// Result: 275 276 277
Label1.Text = Request. form [ddl1.UniqueID] + "" + Request. form ["ddl2"] + "" + Request. form [ddl3.ClientID. replace ("_", "$")]; problem: the text value in the drop-down box is transferred through the HiddenField Control <asp: HiddenField ID = "HiddenField1" runat = "server"/>
<Asp: HiddenField ID = "HiddenField2" runat = "server"/>
<Asp: HiddenField ID = "HiddenField3" runat = "server"/>
Grant the value of the selected drop-down box to the hidden control: <script type = "text/javascript">
Var Key1 = $ ("# ddl1> option: selected"). val ();
$ ('# HiddenField1'). val (Key1 );
Var Key2 = $ ("# ddl2> option: selected"). val ();
$ ('# HiddenField2'). val (Key2 );
Var Key3 = $ ("# ddl3> option: selected"). val ();
$ ('# HiddenField3'). val (Key3 );
</Script>

The value dynamically assigned to the HiddenField control after the drop-down box is selected cannot match the value selected in the drop-down box!
It may be related to initialization. Where should I place the value assignment code? Or is there any good method? Are you welcome to discuss it?