asp.net 用Ajax实现下拉列表联动

很多时候我们都实现下拉列表的联动都是用 DropDownList 的服务器事件在后台给下级列表框重绑数据，但如果在页面中有验证的话设 AoutPostBack 将会参与验证，在这时候我们想到了用Ajax来实现

 

脚本部分 

function check1(val)
{
    $.ajax({
  type: "get",
  url: "/user/User/NewCompanyTypeAjax.aspx?typeUp="+val+"&grade=2",
  datatype : "json",
  
  success: function(data, textStatus){
           var arrids=new Array();
            arrids=data.split('/');
            load_Area_t(arrids);
  },
  complete: function(XMLHttpRequest, textStatus){
   //HideLoading();
   //alert("complete");
  },
  error: function(){
   //请求出错处理
   alert("数据连接出错！");
  }
});

}
function load_Area_t(vals)
{
    var ddlareat = document.getElementById('<%=ddlProductType2.ClientID %>');
    for(var i=ddlareat.length;i>0;i--)   
        ddlareat.remove(ddlareat.options[i]);
    var id="";
    for(var i=0;i<vals.length-1;i++)
    {
        if(i==0)
        {
            id=vals[i].substring(0,vals[i].indexOf(','));
        }         
        var y=document.createElement('option');
        y.text=vals[i].substring(vals[i].indexOf(',')+1);
        y.value=vals[i].substring(0,vals[i].indexOf(','));
        ddlareat.add(y);
    }
    check2(id);
}

function check2(val)
{
    $.ajax({
  type: "get",
  url: "/user/User/NewCompanyTypeAjax.aspx?typeUp="+val+"&grade=3",
  datatype : "json",
  
  success: function(data, textStatus){
           var arrids=new Array();
            arrids=data.split('/');
            load_Area_t2(arrids);
  },
  complete: function(XMLHttpRequest, textStatus){  },
  error: function(){
   //请求出错处理
   alert("数据连接出错！");
  }
});
}
function load_Area_t2(vals)
{
    var ddlareat = document.getElementById('<%=ddlProductType3.ClientID %>');
    for(var i=ddlareat.length;i>0;i--)   
        ddlareat.remove(ddlareat.options[i]);
    for(var i=0;i<vals.length-1;i++)
    {

        var y=document.createElement('option');
        y.text=vals[i].substring(vals[i].indexOf(',')+1);
        y.value=vals[i].substring(0,vals[i].indexOf(','));
        ddlareat.add(y);
    }
    }

页面部分

<asp:DropDownList ID="ddlProductType1" runat="server" CssClass="input300" onchange="check1(this.value)">
 </asp:DropDownList> 

<asp:DropDownList ID="ddlProductType2" runat="server" CssClass="input300" onchange="check2(this.value)">
 </asp:DropDownList>
 <asp:DropDownList ID="ddlProductType3" runat="server" CssClass="input300" onchange="check3(this.value)">
 </asp:DropDownList>

 

请求页面代码

 

while (dr.Read())
{

     rutStr += dr["MEMO"].ToString() + "," + dr["NAME"].ToString() + "/";
 }
  Response.Write(rutStr);
  Response.End();

temp_spanTitle