<HTML>
<HEAD>
<title>Ajax实现无刷新三联动下拉框</title>
<metacontent="MicrosoftVisualStudio.NET7.1"name="GENERATOR">
<metacontent="C#"name="CODE_LANGUAGE">
<metacontent="JavaScript"name="vs_defaultClientScript">
<metacontent="http://schemas.microsoft.com/intellisense/ie5"name="vs_targetSchema">
<SCRIPTlanguage="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>
<bodyms_positioning="GridLayout">
<formid="Form1"method="post"runat="server">
<TABLEid="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:dropdownlistid="DropDownList1"runat="server"></asp:dropdownlist></TD>
</TR>
<TR>
<TD>城市</TD>
<TD><asp:dropdownlistid="DropDownList2"runat="server"></asp:dropdownlist></TD>
</TR>
<TR>
<TD>市区</TD>
<TD><asp:dropdownlistid="DropDownList3"runat="server"></asp:dropdownlist></TD>
</TR>
</TABLE>
<asp:TextBoxid="TextBox1"style="Z-INDEX:102;LEFT:416px;POSITION:absolute;TOP:48px"runat="server"
Width="424px"></asp:TextBox><INPUTstyle="Z-INDEX:103;LEFT:456px;WIDTH:56px;POSITION:absolute;TOP:96px;HEIGHT:24px"
type="button"value="test"onclick="getData();">
</form>
</body>
</HTML>2.cs代码
usingSystem;
usingSystem.Collections;
usingSystem.ComponentModel;
usingSystem.Data;
usingSystem.Drawing;
usingSystem.Web;
usingSystem.Web.SessionState;
usingSystem.Web.UI;
usingSystem.Web.UI.WebControls;
usingSystem.Web.UI.HtmlControls;
namespaceAjaxTest
{
/**////<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()
{
this.Load+=newSystem.EventHandler(this.Page_Load);
}
#endregion
}
}3.AjaxMethod
usingSystem;
usingSystem.Data;
usingSystem.Data.SqlClient;
namespaceAjaxTest
{
/**////<summary>
///SummarydescriptionforAjaxMethod.
///</summary>
publicclassAjaxMethod
{
GetProvinceList#regionGetProvinceList
publicstaticDataSetGetProvinceList()
{
stringsql="select*fromprovince";
returnGetDataSet(sql);
}
#endregion
GetCityList#regionGetCityList
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
publicDataSetGetCityList(intprovinceid)
{
stringsql="select*fromcitywherefather="+provinceid;
returnGetDataSet(sql);
}
#endregion
GetAreaList#regionGetAreaList
[Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)]
publicDataSetGetAreaList(intcityid)
{
stringsql="select*fromareawherefather="+cityid;
returnGetDataSet(sql);
}
#endregion
GetDataSet#regionGetDataSet
publicstaticDataSetGetDataSet(stringsql)
{
stringConnectionString=System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"];
SqlDataAdaptersda=newSqlDataAdapter(sql,ConnectionString);
DataSetds=newDataSet();
sda.Fill(ds);
returnds;
}
#endregion
}
}4.web.config
<httpHandlers>
<addverb="POST,GET"path="ajax/*.ashx"type="Ajax.PageHandlerFactory,Ajax"/>
</httpHandlers>5.ajax.dll下载/Files/singlepine/Ajax.rar
【Ajax实现无刷新三联动下拉框】相关文章：
★ 利用AjaxControlToolkit实现百度搜索时的下拉列表提示详细步骤
★ jquery ajax实现下拉框三级无刷新联动,且保存保持选中值状态