AJAX无刷新下拉框联动的简单示例，分别使用了AJAX组件和xmlHttp异步刷新两种方式。

本文链接：https://blog.csdn.net/fmpfantasy/article/details/2335141

来自Asp.net精英论坛：bbs.1aspx.com

前台代码:

<% ... @ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm8.aspx.cs" Inherits="WebApplication1.WebForm8"

ValidateRequest="false" EnableEventValidation="false" %>

<! 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 > AJAX无刷新下拉框联动 </ title >

< script language ="JavaScript" > ...

/**//*作者: WhirlWind(20080424)*/

//以XML获取下拉框4的数据

var xmlHttp;

function XmlPost(obj)

...{

　　 var svalue = obj.value;

　　 var webFileUrl = "?d3=" + svalue;

　　 //var result = "";

　　 // xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");

　　 if (window.ActiveXObject)//创建对象

...{

this.xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");

}

else

...{

this.xmlHttp = new XMLHttpRequest();

}

　　 //将对象状态与事件相关联

xmlHttp.onreadystatechange=statechange;

　　 xmlHttp.open("POST", webFileUrl, false);

　　 xmlHttp.send("");

　　 //result = xmlHttp.responseText;

}

function statechange()

...{

//判断异步调用是否已经完成

if(xmlHttp.readystate==4)

...{

//判断完成的提示代码是否是OK状态

if(xmlHttp.status==200)

...{

//将返回数据作为参数，传递给填充方法

FillData(xmlHttp.responseText);

}

else

...{

var drr4=document.getElementById("<%=DropDownList4.ClientID %>");//服务器控件

var select1 = document.getElementById("Select1"); //HTML控件

　 for (i = select1.length; i >= 0; i--)

　 ...{

select1.remove(i); //清空

drr4.remove(i);

}

// alert("出现错误!");

}

function FillData(result)

...{

　　 var drr4=document.getElementById("<%=DropDownList4.ClientID %>");//服务器控件

var select1 = document.getElementById("Select1"); //HTML控件

　 for (i = select1.length; i >= 0; i--)

　 ...{

select1.remove(i); //清空

drr4.remove(i);

}

if(result != "")

　　 ...{

　　　　 var piArray = result.split(",");//加载联动数据

　　　　 for(var i=0;i<piArray.length;i++)

　　　　 ...{

　　　　　　 var newOption = document.createElement("OPTION");

newOption.text=piArray[i].toString() ;

newOption.value=piArray[i].toString();

select1.options.add(newOption);

var newOption1 = document.createElement("OPTION");

newOption1.text=piArray[i].toString() ;

newOption1.value=piArray[i].toString();

drr4.options.add(newOption1);

　　　　 }

　　 else

　　 ...{

　　　　 alert("返回的是空值!");

　　 }

</ script >

< style type ="text/css" > ...

#Select1

{...}{

width: 36px;

}

.style1

{...}{

color: #FF0000;

}

</ style >

</ head >

< body >

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

< asp:ScriptManager ID ="ScriptManager1" runat ="server" >

</ asp:ScriptManager >

< div >

< span class ="style1" > AJAX刷新： </ span >< br />

下拉框1： </ div >

< asp:DropDownList ID ="DropDownList1" runat ="server" AutoPostBack ="True" OnSelectedIndexChanged ="DropDownList1_SelectedIndexChanged" >

</ asp:DropDownList >

< br />

下拉框2:

< asp:UpdatePanel ID ="UpdatePanel1" runat ="server" >

< ContentTemplate >

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

</ asp:DropDownList >

</ ContentTemplate >

</ asp:UpdatePanel >

< p >

  </ p >

< p class ="style1" >

异步刷新： </ p >

< p >

下拉框3: </ p >

< p >

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

</ asp:DropDownList >

</ p >

< p >

下拉框4: </ p >

< p >

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

</ asp:DropDownList >

服务器控件 </ p >

< p >

< select id ="Select1" name ="D1" >

< option ></ option >

</ select > HTML控件 </ p >

< p >

  </ p >

</ form >

</ body >

</ html >

后台代码：

using System;

using System.Collections;

using System.Configuration;

using System.Data;

using System.Linq;

using System.Web;

using System.Web.Security;

using System.Web.UI;

using System.Web.UI.HtmlControls;

using System.Web.UI.WebControls;

using System.Web.UI.WebControls.WebParts;

using System.Xml.Linq;

using System.Data.SqlClient;

namespace WebApplication1

... {

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

...{

/**//*作者: WhirlWind(20080424)*/

//public string d1str = string.Empty;//下拉框字符串，以","分隔

protected void Page_Load(object sender, EventArgs e)

...{

string connstr = ConfigurationManager.ConnectionStrings["TestConnectionString"].ToString();//连接字符串

if (!IsPostBack)

...{

drrlist1bind();

drrlist2bind();

drrlist3bind();

//DropDownList4.Items.Add(new ListItem("1", "1"));

}

this.DropDownList3.Attributes.Add("onchange", "XmlPost(this);");//添加事件属性

drr4bind();//异步绑定

}

//通过异步刷新绑定下拉框4

private void drr4bind()

...{

if (Request.QueryString["d3"] != null)

...{

string s1 = Request.QueryString["d3"];

SqlDataReader drr = SqlHelper.ExecuteReader(CommandType.Text, "select b from table_1 where c='" + s1 + "'", null);

string d1str = "";

while (drr.Read())

...{

d1str += "," + drr[0];

}

d1str = d1str.Substring(1);

Response.Write(d1str);

Response.End();

}

绑定下拉框#region 绑定下拉框

//绑定下拉框1

private void drrlist1bind()

...{

SqlDataReader dr = SqlHelper.ExecuteReader(CommandType.Text, "SELECT a FROM table_1", null);

DropDownList1.DataSource = dr;

DropDownList1.DataTextField = "a";

DropDownList1.DataValueField = "a";

DropDownList1.DataBind();

dr.Close();

}

//绑定下拉框2

private void drrlist2bind()

...{

SqlDataReader dr2 = SqlHelper.ExecuteReader(CommandType.Text, "SELECT c FROM table_1", null);

DropDownList2.DataSource = dr2;

DropDownList2.DataTextField = "c";

DropDownList2.DataValueField = "c";

DropDownList2.DataBind();

dr2.Close();//关闭DR

}

//绑定下拉框3

private void drrlist3bind()

...{

SqlDataReader dr = SqlHelper.ExecuteReader(CommandType.Text, "SELECT a FROM table_1", null);

DropDownList3.DataSource = dr;

DropDownList3.DataTextField = "a";

DropDownList3.DataValueField = "a";

DropDownList3.DataBind();

dr.Close();

}

#endregion

//选择事件

protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)

...{

string s1 = DropDownList1.SelectedValue;

SqlDataReader dr = SqlHelper.ExecuteReader(CommandType.Text, "select b from table_1 where c='" + s1 + "'", null);

DropDownList2.DataSource = dr;

DropDownList2.DataTextField = "b";

DropDownList2.DataValueField = "b";

DropDownList2.DataBind();

dr.Close();

}