AJAX无刷新下拉框联动

来源：互联网发布：决策树经典算法编辑：程序博客网时间：2024/06/10 22:40

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

前台代码:

<%@ 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">

<title>AJAX无刷新下拉框联动</title>

/*作者: 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>

#Select1

{

width: 36px;

}

.style1

{

color: #FF0000;

}

</style>

</head>

<body>

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

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

</asp:DropDownList>

</ContentTemplate>

</asp:UpdatePanel>

<p>

 </p>

异步刷新：</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>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();

}

绑定下拉框

//选择事件

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();

}