jQueryJSON 无刷新三级联动

   
    
    <
    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:

   
    
    <
    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'>请选择...</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>
    "
    ).val(data[i].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>
    "
    ).val(data[i].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>
    "
    ).val(data[i].ID).
html(data[i].Cname));
 }; 
 }); 
 } 
 }

    <
    /
    script>
   

LoadClass.ashx:

   
    
    <%
    @ 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) {
 
    //
     数组 [{"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 class
Order 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
    ;
 }
 }
}
   

注意：

代码

    
     
     //
     后台只能获取value值，不能直接获取text，需要通过js、控件中转 

     //
     结果：275 276 277 
     

     Label1.Text 
     =
      Request.Form[ddl1.UniqueID] 
     +
      
     "
      
     "
      
 
     +
      Request.Form[
     "
     ddl2
     "
     ] 
     +
      
     "
      
     "
      
 
     +
      Request.Form[ddl3.ClientID.Replace(
     "
     _
     "
     , 
     "
     $
     "
     )] ;
    

遇到的问题：下拉框text的值通过HiddenField控件中转

   
    
    <
    asp:HiddenField ID
    =
    "
    HiddenField1
    "
     runat
    =
    "
    server
    "
     
    />
    

    <
    asp:HiddenField ID
    =
    "
    HiddenField2
    "
     runat
    =
    "
    server
    "
     
    />
    

    <
    asp:HiddenField ID
    =
    "
    HiddenField3
    "
     runat
    =
    "
    server
    "
     
    />
     
   

把选中下拉框的值赋予隐藏控件中：

   
    
    <
    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
    >
   

选择下拉框后 动态赋值到HiddenField 控件中的值 无法与下拉框选中的值相对应！可能与初始化有关，赋值这段代码应该放到什么地方呢？或者有什么好的方法，欢迎讨论？