DropdownList 调用AJax 级联显示

<script type="text/javascript">
var xmlHttp;
var objSele;
//AJax
function AjaxMehtod(Surl)
{
    var url = Surl+"&time="+new Date();
    xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
    xmlHttp.onreadystatechange = CallBackMethod;
    xmlHttp.open("post", Surl, true);
    xmlHttp.send(null);
}
//回调函数
function CallBackMethod()
{
    if (4 == xmlHttp.readyState && 200 == xmlHttp.status)
    {
        var val = xmlHttp.responseText;
        var selMain = document.getElementById('<%=dropCategory.ClientID %>');
        if(val != "")
        {
            while(true)
            {
                var o=objSele.nextSibling;
                if(!!o)
                    o.removeNode();
                else
                    break;
            }
            createSelect(val);
        }
        else
        {
            while(true)
            {
                var o=objSele.nextSibling;
                if(!!o)
                    o.removeNode();
                else
                    break;
            }
        }
    }
}
//Change事件
function Change(obj)
{
    objSele = obj;
    var id = objSele.value;
    var url = "AjaxCateMethod.aspx?id="+id;
    AjaxMehtod(url);
   
   
    //绑定当前所选的分类的值
    var index = objSele.selectedIndex;
    var text1 = objSele.options[index].text;
    if(text1 != "--请选择--")
    {
        document.getElementById("div1").innerText = "所选分类："+text1;
        document.getElementById("<%=hidCateID.ClientID %>").value = id;
    }
   
}

function  createSelect(str)  
{  
    var items = str.split(',');
    var oSel = document.createElement("select"); 
   
    var oo =  document.createElement("option");
    oo.innerText = "--请选择--";  
    oo.value = "-1";  
    oSel.appendChild(oo);
    for(var i=0;i<items.length;i++)  
    {  
        var arrs = items[i].split('-');
        var oOption = document.createElement("option");  
        oOption.innerText = arrs[1];  
        oOption.value = arrs[0];  
        oSel.appendChild(oOption);  
    }  
    var obj = document.getElementById("fen");
    obj.appendChild(oSel);  
    obj.onchange = null;  
    oSel.onchange = function(){ Change(this);}
}

</script>

 

后台使用方法

this.dropCategory.Attributes.Add("onchange", "Change(this);");

 

AJAX调用的页面后台代码如下

主要功能是 返回字符串，

例如： "0-重庆,1-上海,2-北京"

 

using System;
using System.Data;
using System.Configuration;
using System.Collections;
using System.Web;
using System.Web.Security;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.WebControls.WebParts;
using System.Web.UI.HtmlControls;

using System.Text;public partial class WebForm_AjaxCateMethod : System.Web.UI.Page
{
    protected void Page_Load(object sender, EventArgs e)
    {
       
    }
    protected override void Render(HtmlTextWriter writer)
    {
        string id = Request.QueryString["id"].ToString();
        Madeinchina.BLL.SUPT.Category bll = new Madeinchina.BLL.SUPT.Category();
        DataTable dt =  bll.GetList("PARENT_ID="+id);
        StringBuilder sb = new StringBuilder();
        for (int i = 0; i < dt.Rows.Count; i++)
        {
            sb.AppendFormat("{0}-{1},", dt.Rows[i]["CATEGORY_ID"].ToString(), dt.Rows[i]["CATEGORY_NAME"].ToString());
        }
        string val = "";
        if (sb.ToString().Length > 0)
        {
            val = sb.ToString().Substring(0, sb.ToString().Length - 1);
        }
        Response.Write(val);
    }
}