文章详情

  • 游戏榜单
  • 软件榜单
关闭导航
热搜榜
热门下载
热门标签
php爱好者> php文档>asp.net 用ajax实现下拉列表联动...

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

时间:2010-08-08  来源:huangjianfei

很多时候我们都实现下拉列表的联动都是用 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

相关阅读 更多 +
排行榜 更多 +
辰域智控app

辰域智控app

系统工具 下载
网医联盟app

网医联盟app

运动健身 下载
汇丰汇选App

汇丰汇选App

金融理财 下载