清清月儿 .NET万花筒 Asp.net技术 Asp.net教程 Asp.net源码 Asp.net基础 Asp.net控件 Asp.net入门

天下事有难易乎？为之，则难者亦易矣；不为，则易者亦难矣。

用户操作

[即时聊天] [发私信] [加为好友]

清清月儿ID：21aspnet

共2117063次访问，排名5，好友12人，关注者622人。

21aspnet的文章

原创 970 篇

翻译 9 篇

转载 33 篇

评论 1412 篇

清清月儿的公告

最近评论

haoyg123：我是新手，写的相当好啊，受益非浅哪。

redfox241：这个真的好用马？
你用过没有？就知道拿来用！！！

yynju：顶楼主的好文，网站的效率非常关键！

yinyaling：看完您的文章，受益非浅啊

huximing：这里的东西真多,一下子是看不完的,先收藏了

文章分类

收藏

相册

图片库

图片库2

.NET 工具

C# to VB.NET Translator

VB.NET and C# Comparison

.NET 下载/讲座视频

Visual Studio 2005 的工具

wrox出版社书刊代码下载

中国台湾微软MSDN

中文MSDN WebCast网络广播全部下载列表

.NET 优秀Blog

Teddy's Knowledge Base

Think Different and Think More

.NET 优秀网站

Internet Explorer 开发者资源

iwebsms

MSDN Web/服务

MSDN中文

Scott Guthrie(ASP.NET之父)

世界上最大的Open Source项目在线网站

Ajax链接

DHTML menu4作者主页 (RSS)

综合开发技术网

网页设计师:web标准教程及推广,网站重构

存档

软件项目交易

订阅我的博客

Ajax实现无刷新三联动下拉框收藏

新一篇: Ajax.NET的几个示例代码 | 旧一篇: Ajax简单示例之改变下拉框动态生成表格

1.html代码

<HTML>

<HEAD>

<title>Ajax实现无刷新三联动下拉框</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)

{

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

<TABLE id="Table1" style="Z-INDEX: 101; LEFT: 96px; POSITION: absolute; TOP: 32px" cellSpacing="1"

cellPadding="1" width="300" border="1" bgColor="#ccff66">

<TR>

</TR>

<TR>

</TR>

<TR>

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

public class 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;

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

}

清清月儿 .NET万花筒 Asp.net技术 Asp.net教程 Asp.net源码 Asp.net基础 Asp.net控件 Asp.net入门

天下事有难易乎？为之，则难者亦易矣；不为，则易者亦难矣。

Ajax实现无刷新三联动下拉框 收藏

新一篇: Ajax.NET的几个示例代码 | 旧一篇: Ajax简单示例之改变下拉框动态生成表格

Ajax实现无刷新三联动下拉框收藏