Ajax实现无刷新三联动下拉框

1.html代码

< HTML >
< HEAD >
< title > Ajax实现无刷新三联动下拉框 </ title >
< meta content ="MicrosoftVisualStudio.NET7.1" name ="GENERATOR" >
< meta content ="C#" name ="CODE_LANGUAGE" >
< meta content ="JavaScript" name ="vs_defaultClientScript" >
< meta content ="http://schemas.microsoft.com/intellisense/ie5" name ="vs_targetSchema" >
< SCRIPT language ="javascript" >
//城市------------------------------
functioncityResult()
{
varcity=document.getElementById("DropDownList1");
AjaxMethod.GetCityList(city.value,get_city_Result_CallBack);
}

functionget_city_Result_CallBack(response)
{
if(response.value!=null)
{
//debugger;
document.all("DropDownList2").length=0;　　　　
　　　　vards=response.value;
if(ds!=null&&typeof(ds)=="object"&&ds.Tables!=null)
{
for(vari=0;i<ds.Tables[0].Rows.length;i++)
　　　　{
　　　　varname=ds.Tables[0].Rows[i].city;
　　　　　　varid=ds.Tables[0].Rows[i].cityID;
　　　　　　document.all("DropDownList2").options.add(newOption(name,id));
　　　　}
}
}
return
}
//市区----------------------------------------
functionareaResult()
{
vararea=document.getElementById("DropDownList2");
AjaxMethod.GetAreaList(area.value,get_area_Result_CallBack);
}
functionget_area_Result_CallBack(response)
{
if(response.value!=null)
{
document.all("DropDownList3").length=0;　　　　
　　　　vards=response.value;
if(ds!=null&&typeof(ds)=="object"&&ds.Tables!=null)
{
for(vari=0;i<ds.Tables[0].Rows.length;i++)
　　　　{
　　　　　　varname=ds.Tables[0].Rows[i].area;
　　　　　　varid=ds.Tables[0].Rows[i].areaID;
　　　　　　document.all("DropDownList3").options.add(newOption(name,id));
　　　　}
}
}
return
}
functiongetData()
{
varprovince=document.getElementById("DropDownList1");
varpindex=province.selectedIndex;
varpValue=province.options[pindex].value;
varpText=province.options[pindex].text;

varcity=document.getElementById("DropDownList2");
varcindex=city.selectedIndex;
varcValue=city.options[cindex].value;
varcText=city.options[cindex].text;

vararea=document.getElementById("DropDownList3");
varaindex=area.selectedIndex;
varaValue=area.options[aindex].value;
varaText=area.options[aindex].text;

vartxt=document.getElementById("TextBox1");

document.getElementById("<%=TextBox1.ClientID%>").innerText="省:"+pValue+"|"+pText+"市:"+cValue+"|"+cText+"区:"+aValue+"|"+aText;
}
</ SCRIPT >
</ HEAD >
< body ms_positioning ="GridLayout" >
< form id ="Form1" method ="post" runat ="server" >
< TABLE id ="Table1" style ="Z-INDEX:101;LEFT:96px;POSITION:absolute;TOP:32px" cellSpacing ="1"
cellPadding ="1" width ="300" border ="1" bgColor ="#ccff66" >
< TR >
< TD > 省市 </ TD >
< TD >< asp:dropdownlist id ="DropDownList1" runat ="server" ></ asp:dropdownlist ></ TD >
</ TR >
< TR >
< TD > 城市 </ TD >
< TD >< asp:dropdownlist id ="DropDownList2" runat ="server" ></ asp:dropdownlist ></ TD >
</ TR >
< TR >
< TD > 市区 </ TD >
< TD >< asp:dropdownlist id ="DropDownList3" runat ="server" ></ asp:dropdownlist ></ TD >
</ TR >
</ TABLE >
< asp:TextBox id ="TextBox1" style ="Z-INDEX:102;LEFT:416px;POSITION:absolute;TOP:48px" runat ="server"
Width ="424px" ></ asp:TextBox >< INPUT style ="Z-INDEX:103;LEFT:456px;WIDTH:56px;POSITION:absolute;TOP:96px;HEIGHT:24px"
type ="button" value ="test" onclick ="getData();" >
</ form >
</ body >
</ HTML >

2.cs代码

using System;
using System.Collections;
using System.ComponentModel;
using System.Data;
using System.Drawing;
using System.Web;
using System.Web.SessionState;
using System.Web.UI;
using System.Web.UI.WebControls;
using System.Web.UI.HtmlControls;
namespace AjaxTest
{
/**////<summary>
///SummarydescriptionforWebForm1.
///</summary>
publicclassWebForm1:System.Web.UI.Page
{
protectedSystem.Web.UI.WebControls.DropDownListDropDownList1;
protectedSystem.Web.UI.WebControls.DropDownListDropDownList2;
protectedSystem.Web.UI.WebControls.TextBoxTextBox1;
protectedSystem.Web.UI.WebControls.DropDownListDropDownList3;

privatevoidPage_Load(objectsender,System.EventArgse)
{
Ajax.Utility.RegisterTypeForAjax(typeof(AjaxMethod));
if(!Page.IsPostBack)
{
this.DropDownList1.DataSource=AjaxMethod.GetProvinceList();
this.DropDownList1.DataTextField="province";
this.DropDownList1.DataValueField="provinceID";
this.DropDownList1.DataBind();

this.DropDownList1.Attributes.Add("onclick","cityResult();");
this.DropDownList2.Attributes.Add("onclick","areaResult();");
}
}

WebFormDesignergeneratedcode#regionWebFormDesignergeneratedcode
overrideprotectedvoidOnInit(EventArgse)
{
//
//CODEGEN:ThiscallisrequiredbytheASP.NETWebFormDesigner.
//
InitializeComponent();
base.OnInit(e);
}

/**////<summary>
///RequiredmethodforDesignersupport-donotmodify
///thecontentsofthismethodwiththecodeeditor.
///</summary>
privatevoidInitializeComponent()

分享到：

Ajax.NET的几个示例代码 | Ajax简单示例之改变下拉框动态生成表格

• 2007-03-19 23:02
• 浏览 180
• 评论(0)
• 相关推荐

评论

发表评论

您还没有登录,请您登录后再发表评论