<HTML> <HEAD> <title>Ajax实现无刷新三联动下拉框</title> <meta content="Microsoft Visual Studio .NET 7.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"> //城市------------------------------ function cityResult() { var city=document.getElementById("DropDownList1"); AjaxMethod.GetCityList(city.value,get_city_Result_CallBack); } function get_city_Result_CallBack(response) { if (response.value !=null) { //debugger; document.all("DropDownList2").length=0; var ds = response.value; if(ds !=null&&typeof(ds) =="object"&& ds.Tables !=null) { for(var i=0; i<ds.Tables[0].Rows.length; i++) { var name=ds.Tables[0].Rows[i].city; var id=ds.Tables[0].Rows[i].cityID; document.all("DropDownList2").options.add(new Option(name,id)); } } } return } //市区---------------------------------------- function areaResult() { var area=document.getElementById("DropDownList2"); AjaxMethod.GetAreaList(area.value,get_area_Result_CallBack); } function get_area_Result_CallBack(response) { if (response.value !=null) { document.all("DropDownList3").length=0; var ds = response.value; if(ds !=null&&typeof(ds) =="object"&& ds.Tables !=null) { for(var i=0; i<ds.Tables[0].Rows.length; i++) { var name=ds.Tables[0].Rows[i].area; var id=ds.Tables[0].Rows[i].areaID; document.all("DropDownList3").options.add(new Option(name,id)); } } } return } function getData() { var province=document.getElementById("DropDownList1"); var pindex = province.selectedIndex; var pValue = province.options[pindex].value; var pText = province.options[pindex].text; var city=document.getElementById("DropDownList2"); var cindex = city.selectedIndex; var cValue = city.options[cindex].value; var cText = city.options[cindex].text; var area=document.getElementById("DropDownList3"); var aindex = area.selectedIndex; var aValue = area.options[aindex].value; var aText = area.options[aindex].text; var txt=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> /// Summary description for WebForm1. ///</summary> publicclass WebForm1 : System.Web.UI.Page { protected System.Web.UI.WebControls.DropDownList DropDownList1; protected System.Web.UI.WebControls.DropDownList DropDownList2; protected System.Web.UI.WebControls.TextBox TextBox1; protected System.Web.UI.WebControls.DropDownList DropDownList3; privatevoid Page_Load(object sender, System.EventArgs e) { 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();"); } } Web Form Designer generated code#region Web Form Designer generated code overrideprotectedvoid OnInit(EventArgs e) { // // CODEGEN: This call is required by the ASP.NET Web Form Designer. // InitializeComponent(); base.OnInit(e); } /**////<summary> /// Required method for Designer support - do not modify /// the contents of this method with the code editor. ///</summary> privatevoid InitializeComponent() { this.Load +=new System.EventHandler(this.Page_Load); } #endregion } }
3.AjaxMethod
using System; using System.Data; using System.Data.SqlClient; namespace AjaxTest { /**////<summary> /// Summary description for AjaxMethod. ///</summary> publicclass AjaxMethod { GetProvinceList#region GetProvinceList publicstatic DataSet GetProvinceList() { string sql="select * from province"; return GetDataSet(sql); } #endregion GetCityList#region GetCityList [Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)] public DataSet GetCityList(int provinceid) { string sql="select * from city where father="+provinceid; return GetDataSet(sql); } #endregion GetAreaList#region GetAreaList [Ajax.AjaxMethod(Ajax.HttpSessionStateRequirement.Read)] public DataSet GetAreaList(int cityid) { string sql="select * from area where father="+cityid; return GetDataSet(sql); } #endregion GetDataSet#region GetDataSet publicstatic DataSet GetDataSet(string sql) { string ConnectionString=System.Configuration.ConfigurationSettings.AppSettings["ConnectionString"]; SqlDataAdapter sda =new SqlDataAdapter(sql,ConnectionString); DataSet ds=new DataSet(); sda.Fill(ds); return ds; } #endregion } }
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列:如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· winform 绘制太阳,地球,月球 运作规律
· AI与.NET技术实操系列(五):向量存储与相似性搜索在 .NET 中的实现
· 超详细:普通电脑也行Windows部署deepseek R1训练数据并当服务器共享给他人
· 【硬核科普】Trae如何「偷看」你的代码?零基础破解AI编程运行原理
· 上周热点回顾(3.3-3.9)