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