AJAX无刷新下拉框联动的简单示例,分别使用了AJAX组件和xmlHttp异步刷新两种方式。
前台代码:
<%
...
@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm8.aspx.cs" Inherits="WebApplication1.WebForm8"
ValidateRequest="false" EnableEventValidation="false"
%>
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
<!
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
>
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
<
script
language
="JavaScript"
>
...
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
/**//*作者: WhirlWind(20080424)*/
//以XML获取下拉框4的数据
var xmlHttp;
function XmlPost(obj)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
var svalue = obj.value;
var webFileUrl = "?d3=" + svalue;
//var result = "";
// xmlHttp = new ActiveXObject("MSXML2.XMLHTTP");
if (window.ActiveXObject)//创建对象
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
this.xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
}
else
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
this.xmlHttp = new XMLHttpRequest();
}
//将对象状态与事件相关联
xmlHttp.onreadystatechange=statechange;
xmlHttp.open("POST", webFileUrl, false);
xmlHttp.send("");
//result = xmlHttp.responseText;
}
function statechange()
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
//判断异步调用是否已经完成
if(xmlHttp.readystate==4)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
//判断完成的提示代码是否是OK状态
if(xmlHttp.status==200)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
//将返回数据作为参数,传递给填充方法
FillData(xmlHttp.responseText);
}
}
else
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
var drr4=document.getElementById("<%=DropDownList4.ClientID %>");//服务器控件
var select1 = document.getElementById("Select1"); //HTML控件
for (i = select1.length; i >= 0; i--)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
select1.remove(i); //清空
drr4.remove(i);
}
// alert("出现错误!");
}
}
function FillData(result)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
var drr4=document.getElementById("<%=DropDownList4.ClientID %>");//服务器控件
var select1 = document.getElementById("Select1"); //HTML控件
for (i = select1.length; i >= 0; i--)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
select1.remove(i); //清空
drr4.remove(i);
}
if(result != "")
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
var piArray = result.split(",");//加载联动数据
for(var i=0;i<piArray.length;i++)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
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
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
alert("返回的是空值!");
}
}
</
script
>
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
<
style
type
="text/css"
>
...
#Select1
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
{...}{
width: 36px;
}
.style1
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
{...}{
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;
![](https://i-blog.csdnimg.cn/blog_migrate/6810355c2f78c12e91b7997a8e8c583a.gif)
namespace
WebApplication1
![](https://i-blog.csdnimg.cn/blog_migrate/a41954a27d6ad96fa2c2cf816e677448.gif)
...
{
public partial class WebForm8 : System.Web.UI.Page
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
/**//*作者: WhirlWind(20080424)*/
//public string d1str = string.Empty;//下拉框字符串,以","分隔
protected void Page_Load(object sender, EventArgs e)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
string connstr = ConfigurationManager.ConnectionStrings["TestConnectionString"].ToString();//连接字符串
if (!IsPostBack)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
drrlist1bind();
drrlist2bind();
drrlist3bind();
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
//DropDownList4.Items.Add(new ListItem("1", "1"));
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
}
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
this.DropDownList3.Attributes.Add("onchange", "XmlPost(this);");//添加事件属性
drr4bind();//异步绑定
}
//通过异步刷新绑定下拉框4
private void drr4bind()
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
if (Request.QueryString["d3"] != null)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
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())
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
d1str += "," + drr[0];
}
d1str = d1str.Substring(1);
Response.Write(d1str);
Response.End();
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
}
}
![](https://i-blog.csdnimg.cn/blog_migrate/7ff8d92cded7e0ce15e7ca1acc870052.gif)
绑定下拉框#region 绑定下拉框
//绑定下拉框1
private void drrlist1bind()
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
SqlDataReader dr = SqlHelper.ExecuteReader(CommandType.Text, "SELECT a FROM table_1", null);
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
DropDownList1.DataSource = dr;
DropDownList1.DataTextField = "a";
DropDownList1.DataValueField = "a";
DropDownList1.DataBind();
dr.Close();
}
//绑定下拉框2
private void drrlist2bind()
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
SqlDataReader dr2 = SqlHelper.ExecuteReader(CommandType.Text, "SELECT c FROM table_1", null);
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
DropDownList2.DataSource = dr2;
DropDownList2.DataTextField = "c";
DropDownList2.DataValueField = "c";
DropDownList2.DataBind();
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
dr2.Close();//关闭DR
}
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
//绑定下拉框3
private void drrlist3bind()
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
SqlDataReader dr = SqlHelper.ExecuteReader(CommandType.Text, "SELECT a FROM table_1", null);
![](https://i-blog.csdnimg.cn/blog_migrate/6a9c071a08f1dae2d3e1c512000eef41.gif)
DropDownList3.DataSource = dr;
DropDownList3.DataTextField = "a";
DropDownList3.DataValueField = "a";
DropDownList3.DataBind();
dr.Close();
}
#endregion
//选择事件
protected void DropDownList1_SelectedIndexChanged(object sender, EventArgs e)
![](https://i-blog.csdnimg.cn/blog_migrate/37c8bf68cdc3cc81759c34160776bc53.gif)
...{
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();
}
}
}