使用ajax,实现DropDownList两级联动,将最终结果呈现在一个TextBox中.
本文来自小山blog:
http://singlepine.cnblogs.com/articles/257954.html
里面是三级联动,有数据库文件可下栽.
我只是将三级更改为两级,使用SQL SERVER数据库而已.
我的截图如下:
1.首先要在项目中增加对ajax.dll 的引用.
AjaxMethod.cs
using System;using System.Data;using System.Data.SqlClient;namespace MyAjaxSample
{
/**//// <summary>
/// AjaxMethod 的摘要说明。
/// </summary> public class AjaxMethod { GetPovinceList#region GetPovinceList public static DataSet GetPovinceList() { string sql="select * from povince"; return GetDataSet(sql); } #endregion GetCityList#region GetCityList [Ajax.AjaxMethod] public DataSet GetCityList(int povinceid) { string sql="select * from city where father='"+povinceid+"'"; return GetDataSet(sql); } #endregion GetAreaList#region GetAreaList [Ajax.AjaxMethod] public DataSet GetAreaList(int cityid) { string sql="select * from area where father='"+cityid+"'"; return GetDataSet(sql); } #endregion GetDataSet#region GetDataSet public static 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 }
}3.HTML代码:
FourAjaxSample.aspx<%@ Page language="c#" Codebehind="FourAjaxSample.aspx.cs" AutoEventWireup="false" Inherits="MyAjaxSample.FourAjaxSample" %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ><HTML> <HEAD> <title>FourAjaxSample</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) { 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)); } document.all("TextBox1").value=""; } } return } function areaResult() { var area=document.getElementById("DropDownList2"); AjaxMethod.GetAreaList(area.value,get_area_Result_CallBack); } function get_area_Result_CallBack() { 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; document.all("TextBox1").value=pText+cText; } </script> </HEAD> <body MS_POSITIONING="GridLayout"> <form id="Form1" method="post" runat="server"> <h3>Ajax实现两级联动</h3> <TABLE class="border" id="border" style="Z-INDEX: 101; LEFT: 16px; WIDTH: 289px; POSITION: absolute; TOP: 48px; HEIGHT: 79px" borderColor="#95b0d9" cellSpacing="0" cellPadding="0" width="289" align="center" bgColor="#ffffff" border="1"> <TR> <TD style="WIDTH: 130px; HEIGHT: 27px" bgColor="#d8e7f6"> <asp:label id="Lab_province" runat="server">省(直辖市)</asp:label></TD> <TD style="HEIGHT: 27px"> <asp:dropdownlist id="DropDownList1" runat="server" onchange="cityResult();"></asp:dropdownlist></TD> </TR> <TR> <TD style="WIDTH: 130px; HEIGHT: 24px" bgColor="#d8e7f6"> <asp:Label id="Lab_City" runat="server">城市</asp:Label></TD> <TD style="HEIGHT: 24px"> <asp:DropDownList id="DropDownList2" runat="server" onchange="areaResult();"></asp:DropDownList></TD> </TR> <TR> <TD style="WIDTH: 130px" bgColor="#d8e7f6">你的最后选择是: </TD> <TD> <asp:TextBox id="TextBox1" runat="server"></asp:TextBox></TD> </TR> </TABLE> </form> </body></HTML>4 .cs文件:
FourAjaxSample.aspx.csusing 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 MyAjaxSample{ /**//// <summary> /// FourAjaxSample 的摘要说明。 /// </summary> public class FourAjaxSample : System.Web.UI.Page { protected System.Web.UI.WebControls.DropDownList DropDownList1; protected System.Web.UI.WebControls.Label Lab_province; protected System.Web.UI.WebControls.Label Lab_City; protected System.Web.UI.WebControls.TextBox TextBox1; protected System.Web.UI.WebControls.DropDownList DropDownList2; private void Page_Load(object sender, System.EventArgs e) { Ajax.Utility.RegisterTypeForAjax(typeof(MyAjaxSample.AjaxMethod)); if(!Page.IsPostBack) { this.DropDownList1.DataSource=AjaxMethod.GetPovinceList(); this.DropDownList1.DataTextField="province"; this.DropDownList1.DataValueField="provinceID"; this.DropDownList1.DataBind(); this.DropDownList1.Attributes.Add("onclick","cityResult();"); this.DropDownList2.Attributes.Add("onclick","areaResult();"); } } Web 窗体设计器生成的代码#region Web 窗体设计器生成的代码 override protected void OnInit(EventArgs e) { // // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。 // InitializeComponent(); base.OnInit(e); } /**//// <summary> /// 设计器支持所需的方法 - 不要使用代码编辑器修改 /// 此方法的内容。 /// </summary> private void InitializeComponent() { this.Load += new System.EventHandler(this.Page_Load); } #endregion }}5.web.config
web.config设置数据库连接串 <appSettings> <!-- SQL数据库连接 --> <add key="ConnectionString" value="Data Source=localhost;User Id=sa;Password=zhangzs;Initial Catalog=mytest;"/> </appSettings>
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· 10年+ .NET Coder 心语，封装的思维：从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热？
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· 10年+ .NET Coder 心语 ── 封装的思维：从隐藏、稳定开始理解其本质意义
· 地球OL攻略 —— 某应届生求职总结
· 提示词工程——AI应用必不可少的技术
· Open-Sora 2.0 重磅开源！
· 周边上新：园子的第一款马克杯温暖上架