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

}

注意：

//后台只能获取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 控件中的值 无法与下拉框选中的值相对应！

可能与初始化有关，赋值这段代码应该放到什么地方呢？或者有什么好的方法，欢迎讨论？

http://www.cnblogs.com/zengxiangzhan/archive/2010/02/21/1670646.html