基于Ajax的无刷新三级联动

最新推荐文章于 2025-08-06 13:42:32 发布

原创最新推荐文章于 2025-08-06 13:42:32 发布 · 711 阅读

·

0

·

CC 4.0 BY-SA版权

版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。

文章标签：

#ajax #dataset #asp #server #html

.net专题 Ajax 专栏收录该内容

4 篇文章

订阅专栏

本文介绍了一种使用Ajax实现的无刷新三级联动效果。通过在用户选择省份后动态加载城市和区县信息，提升了用户体验。文章详细展示了HTML、JavaScript及C#代码。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

经常看到有人做“无刷新三级联动”，自己刚开始学Ajax没多长时间，想挑战一下自己，便蹲在电脑前开始了探险。经过了半天的时间，终于实现了这个功能。虽然蹲得脚麻了，腰酸了，但心里美滋儿滋儿的。这半天通过自己独立的查错、调试，学到了不少东西。我也越来越喜欢Ajax了。OK！加油！Come On！

以下是HTML页面：

<%@ Page Language="C#" AutoEventWireup="true" CodeFile="Default.aspx.cs" Inherits="_Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">

<title>无标题页</title>

<script language="javascript" type="text/javascript">

//绑定City

function BindToCity(ProvinceID,DDL_City_ID)

{

var DataSet_City = _Default.BindToCity(ProvinceID).value;//注意加Value

var DDL_City = document.getElementById(DDL_City_ID);

DDL_City.length = 0;//清除已有选项

var Length = DataSet_City.Tables[0].Rows.length;

if(Length!="0")

{

for(var i=0;i<Length;i++)

{

var Text = DataSet_City.Tables[0].Rows[i].Text;//必须和DataSet的列名一致

var Value = DataSet_City.Tables[0].Rows[i].Value;

DDL_City.options.add(new Option(Text,Value));

}

}

else

{

var DDL_Area = document.getElementById("Area");

DDL_Area.length = 0;

}

}

//绑定Area

function BindToArea(CityID,DDL_Area_ID)

{

var DataSet_Area = _Default.BindToArea(CityID).value;

var DDL_Area = document.getElementById(DDL_Area_ID);

DDL_Area.length = 0;

var Length = DataSet_Area.Tables[0].Rows.length;

for(var i=0;i<Length;i++)

{

var Text = DataSet_Area.Tables[0].Rows[i].Text;

var Value = DataSet_Area.Tables[0].Rows[i].Value;

DDL_Area.options.add(new Option(Text,Value));

}

}

</script>

</head>

<body>

<form id="form1" runat="server">

<div>请选择您所在的省：

<asp:DropDownList ID="Province" runat="server">

</asp:DropDownList>

请选择您所在的市：

<asp:DropDownList ID="City" runat="server">

</asp:DropDownList>

请选择您所在的区：

<asp:DropDownList ID="Area" runat="server">

</asp:DropDownList>

</div>

</form>

</body>

</html>

以下是该页面的cs页面：

using System;

using System.Data;

using System.Configuration;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Web.UI.HtmlControls;

using System.Data.SqlClient;

public partial class _Default : System.Web.UI.Page

{

protected void Page_Load(object sender, EventArgs e)

{

AjaxPro.Utility.RegisterTypeForAjax(typeof(_Default));

this.BindToDDL();

}

//获得DataSet方法

private DataSet GetDS(string SqlString)

{

SqlConnection con = new SqlConnection("server=.;database=ProvinceCityArea;uid=sa;pwd=;");

SqlDataAdapter sda = new SqlDataAdapter();

sda.SelectCommand = new SqlCommand(SqlString, con);

DataSet ds = new DataSet();

sda.Fill(ds);

con.Close();

con.Dispose();

sda.Dispose();

return ds;

}

//绑定Province，并添加事件。

private void BindToDDL()

{

string SQLSelect_Province = @"select * from province";

this.Province.DataSource = GetDS(SQLSelect_Province);

this.Province.DataTextField = "province";

this.Province.DataValueField = "provinceID";

this.Province.DataBind();

this.Province.Items.Insert(0, "请选择");

this.Province.Attributes.Add("onchange", "BindToCity(this.options[selectedIndex].value,'City');");

this.City.Attributes.Add("onchange", "BindToArea(this.options[selectedIndex].value,'Area');");

}

//根据省ID查询相应的城市

[AjaxPro.AjaxMethod]

public DataSet BindToCity(string ProvinceID)

{

string SQLSelect_City = @"select city as Text,cityID as Value from city where father='" + ProvinceID + "'";

return GetDS(SQLSelect_City);

}

//根据城市ID查询相应的区域

[AjaxPro.AjaxMethod]

public DataSet BindToArea(string CityID)

{

string SQLSelect_Area = @"select area as Text,areaID as Value from area where father='"+CityID+"'";

return GetDS(SQLSelect_Area);

}

}

评论 1

被折叠的条评论为什么被折叠?

到【灌水乐园】发言

查看更多评论

添加红包

成就一亿技术人!

hope_wisdom

发出的红包

实付元

使用余额支付

点击重新获取

扫码支付

钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。