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