ajax实现无刷新两级联动DropDownList

最新推荐文章于 2025-08-15 15:42:14 发布

转载最新推荐文章于 2025-08-15 15:42:14 发布 · 389 阅读

文章标签：

#ajax #callback #textbox #server #javascript #border

.NET 专栏收录该内容

356 篇文章

订阅专栏

本文介绍如何使用Ajax实现网页上的两级联动下拉框功能，包括数据库查询、客户端脚本及服务器端处理等关键技术细节。

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

本文来自小山blog:
http://singlepine.cnblogs.com/articles/257954.html
里面是三级联动,有数据库文件可下栽.
我只是将三级更改为两级,使用SQL SERVER数据库而已.

我的截图如下:
o_Ajax两级DropDownList联动.JPG
1.首先要在项目中增加对ajax.dll 的引用.

2.AjaxMethod.cs

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>

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>

<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>

<asp:label id="Lab_province" runat="server">省(直辖市)</asp:label></TD>

<asp:dropdownlist id="DropDownList1" runat="server" onchange="cityResult();"></asp:dropdownlist></TD>

</TR>

<TR>

<asp:Label id="Lab_City" runat="server">城市</asp:Label></TD>

<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.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 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>

文章来源于 http://www.cnblogs.com/zhangzs8896 版权归原作者所有

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

donetk

关注关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

实现无刷新DropdownList联动效果

weixin_30610755的博客

07-12

149

在做一个文章添加功能时，想在选择大类后，自动将其所属二级小类显示出来，使用DropDownList的SelectedIndexChanged事件可以很容易实现，但每次选择后页面总要刷新一次，让人感觉很不爽。为实现DropDownList无刷新二级联动，这几天在网上找了些资料，但都无法达到我想要的效果，经过反复调试，现已基本实现了此功能，现将代码附下。一、数据库设计：字段名数据类型说明 ...

asp.net DropDownList无刷新ajax二级联动实现详细过程

weixin_30549657的博客

09-10

220

只适合新手制作DropDownList无刷新ajax二级联动效果：数据库实现，添加两表如图：表1，pingpai，表2，type，具体数据库实现看自己的理解： //页面主要代码： <asp:ScriptManager ID="ScriptManager1" runat="server"> </asp:ScriptManager&...

参与评论您还未登录，请先登录后发表或查看评论

AJAX控制DropDownList两级联动

a5868530的博客

09-16

157

$(function () { $("#CompanyID").change(function () { var uid = $(this).val(); changediv(uid); }); }); function chan...

如何实现无刷新的DropdownList联动效果

热门推荐

cuike519的blog

08-22

1万+

ASP.NET给我们带了了事件模型的编程机制，这使得我们将所有的任务都放在服务器上执行哪怕是一个小小变动，其实这到不是什么问题，可是有一点我们无法忍受，如果我们改变某一个输入框中的内容页面要刷新，改变DropDownlist的选择项需要更新另一个Dropdownlist需要刷新，真是郁闷。下面我将描述一种原始的方法，之所以说它原是是因为这种方法在ASP.NET之前就已

DropDownList无刷新ajax二级联动效果

zhaohongx的专栏

02-15

1972

页面主要代码： Width="200" AutoPostBack="True"> /

ajax 如何使 dropdownlist 无刷新,asp.net DropDownList无刷新ajax二级联动实现详细过程...

weixin_39725650的博客

08-05

191

数据库实现，添加两表如图：表1，pingpai，表2，type，具体数据库实现看自己的理解：页面主要代码：Width="200" >//以上代码实现ajax的无刷新效果程序主要代码：protected void Page_Load(object sender, EventArgs e){if (!IsPostBack){BindDrop();}}private void BindDrop(...

Ajax.NET Professional csharp DropDownList两级联无刷新绑定

weixin_30644369的博客

07-13

123

客户端代码 1<htmlxmlns="http://www.w3.org/1999/xhtml">2<headrunat="server">3<metacontent="text/html;charset=utf-8"http-equiv="Content-Type"/>4<title>Ajax...

ASP.NET(C#)二级联动下拉列表实现

weixin_42587866的博客

05-15

790

级联下拉列表是指当一个下拉列表的选择改变时，另一个下拉列表的选项随之更新。这种实现可以提供更好的用户体验，因为它允许用户根据选择进一步细化他们的选择。要实现级联下拉列表，通常需要在事件中重新绑定第二个下拉列表的数据，下面是一个简单的示例：// 假设CategoriesDropDownList是父级下拉列表，SubCategoriesDropDownList是子级下拉列表// 首先清空子级下拉列表// 获取父级选中的值。

DropDownList年月二级联动无刷新

03-22

5. 使用ASP.NET AJAX的UpdatePanel或自定义JavaScript代码实现无刷新更新。 6. 在客户端代码中，可能需要编写一些JavaScript或jQuery来处理AJAX回调，更新月份的DropdownList。总之，"DropDownList年月二级联动无...

无刷新二级联动dropdownlist菜单.rar

06-15

总结起来，实现无刷新二级联动DropdownList菜单需要结合HTML、CSS、JavaScript（jQuery）和Ajax技术。通过监听用户在父级菜单中的选择，异步获取并更新子级菜单的内容，这样可以在不刷新页面的情况下提供流畅的用户...

实现无刷新的Ajax二级联动DropDownList功能

从提供的文件信息来看，我们主要关注的是实现“ajax DropdownList 无刷新二级联动”这一功能的知识点。这个功能通常用于动态更新下拉列表的内容而不刷新整个页面，提高用户体验。下面将详细介绍实现该功能的关键技术...

实现DropDownList无刷新二级联动的关键技术

7. **测试和调试**：在实现无刷新二级联动后，需要对功能进行测试，确保在所有可能的用户交互情况下都能正常工作。调试是一个重要的步骤，可以利用浏览器的开发者工具进行。总结以上知识点，无刷新二级联动控件的...

Spark 运行流程核心组件（二）任务调度