利用JavaScript+XmlHttp实现DropDownList无刷新联动
感谢网友hainang1234 (鼠·神·泪)
WebForm1.aspx代码：
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="admin.WebForm1" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
<HEAD>
<title>WebForm1</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<script>
function load(TypeId)
{
//alert(TypeId);
var drp2 = document.getElementById("DropDownList2");
var i=0;
//for(i<=drp2.options.length;i =0;i--)
//{
// drp2.options.remove(0);//不能清除dropdownlist
//}
while (drp2.options.length>0)
{
drp2.options.remove(0);
}
//alert(drp2.options.length);
var dt = new Date();
var oHttpReq = new ActiveXObject("MSXML2.XMLHTTP");
//var oHttpReq = new ActiveXObject("Microsoft.XMLHTTP");
var oDoc = new ActiveXObject("MSXML2.DOMDocument");
oHttpReq.open("POST", "data.aspx?TypeId="+TypeId+"&temp=" + dt.getTime(), false);
oHttpReq.send("");
result = oHttpReq.responseText;
oDoc.loadXML(result);
//alert(result);
items = oDoc.selectNodes("//NewDataSet/Class");
for (var item = items.nextNode(); item; item = items.nextNode())
{
var cid = item.selectSingleNode("NEWID").nodeTypedValue;
var cname = item.selectSingleNode("TITLE").nodeTypedValue;
//document.getElementById('dropdownlist').value
var newOption = document.createElement("OPTION");
newOption.text = cname;
newOption.value = cid;
drp2.options.add(newOption);
}
}
</script>
</HEAD>
<body>
<form id="Form1" method="post" runat="server">
<TABLE id="Table1" cellSpacing="0" cellPadding="0" width="100%" border="0">
<TR>
<TD style="WIDTH: 59px">
<asp:DropDownList id="DropDownList1" runat="server"></asp:DropDownList></TD>
<TD>
<asp:DropDownList id="DropDownList2" runat="server"></asp:DropDownList></TD>
</TR>
</TABLE>
</form>
</body>
</HTML>
WebForm1.aspx.cs
data.aspx.cs
WebForm1.aspx代码：
<%@ Page language="c#" Codebehind="WebForm1.aspx.cs" AutoEventWireup="false" Inherits="admin.WebForm1" %><!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" ><HTML> <HEAD> <title>WebForm1</title> <meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1"> <meta name="CODE_LANGUAGE" Content="C#"> <meta name="vs_defaultClientScript" content="JavaScript"> <meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5"> <script> function load(TypeId) {
//alert(TypeId); var drp2 = document.getElementById("DropDownList2"); var i=0; //for(i<=drp2.options.length;i =0;i--) //{ // drp2.options.remove(0);//不能清除dropdownlist //} while (drp2.options.length>0) {
drp2.options.remove(0); } //alert(drp2.options.length); var dt = new Date(); var oHttpReq = new ActiveXObject("MSXML2.XMLHTTP"); //var oHttpReq = new ActiveXObject("Microsoft.XMLHTTP"); var oDoc = new ActiveXObject("MSXML2.DOMDocument"); oHttpReq.open("POST", "data.aspx?TypeId="+TypeId+"&temp=" + dt.getTime(), false); oHttpReq.send(""); result = oHttpReq.responseText; oDoc.loadXML(result); //alert(result); items = oDoc.selectNodes("//NewDataSet/Class"); for (var item = items.nextNode(); item; item = items.nextNode()) { var cid = item.selectSingleNode("NEWID").nodeTypedValue; var cname = item.selectSingleNode("TITLE").nodeTypedValue; //document.getElementById('dropdownlist').value var newOption = document.createElement("OPTION"); newOption.text = cname; newOption.value = cid; drp2.options.add(newOption); } } </script> </HEAD> <body> <form id="Form1" method="post" runat="server"> <TABLE id="Table1" cellSpacing="0" cellPadding="0" width="100%" border="0"> <TR> <TD style="WIDTH: 59px"> <asp:DropDownList id="DropDownList1" runat="server"></asp:DropDownList></TD> <TD> <asp:DropDownList id="DropDownList2" runat="server"></asp:DropDownList></TD> </TR> </TABLE> </form> </body></HTML>WebForm1.aspx.cs
1using System;
2using System.Collections;
3using System.ComponentModel;
4using System.Configuration;
5using System.Data;
6using System.Data.SqlClient;
7using System.Drawing;
8using System.Web;
9using System.Web.SessionState;
10using System.Web.UI;
11using System.Web.UI.WebControls;
12using System.Web.UI.HtmlControls;
13
14namespace admin
15{
16 /// <summary>
17 /// WebForm1 的摘要说明。
18 /// </summary>
19 public class WebForm1 : System.Web.UI.Page
20 {
21 protected System.Web.UI.WebControls.DropDownList DropDownList1;
22 protected System.Web.UI.WebControls.DropDownList DropDownList2;
23
24 private void Page_Load(object sender, System.EventArgs e)
25 {
26 // 在此处放置用户代码以初始化页面
27 if(!this.IsPostBack)
28 {
29 SqlConnection Conn = new SqlConnection();
30 Conn.ConnectionString = ConfigurationSettings.AppSettings["conn"].ToString();
31 Conn.Open();
32 string strSql = "select * from nlusr_type ";
33 DataSet ds = new DataSet();
34 SqlDataAdapter Adp = new SqlDataAdapter(strSql,Conn);
35 Adp.Fill(ds,"TypeIdList");
36 DropDownList1.DataSource = ds.Tables["TypeIdList"].DefaultView;
37 DropDownList1.DataTextField = "type";
38 DropDownList1.DataValueField = "typeid";
39 DropDownList1.DataBind();
40 ListItem pitme=new ListItem("选择类别","0");
41 DropDownList1.Items.Insert(0,pitme);
42 DropDownList2.Items.Insert(0,pitme);
43 //this.DropDownList1.Attributes.Add("onchange","load(this.options[this.selectedIndex].innerText)");
44 this.DropDownList1.Attributes.Add("onchange","load(this.value)");
45 }
46
47 }
48
49
50 #region Web 窗体设计器生成的代码
51 override protected void OnInit(EventArgs e)
52 {
53 //
54 // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
55 //
56 InitializeComponent();
57 base.OnInit(e);
58 }
59
60 /// <summary>
61 /// 设计器支持所需的方法 - 不要使用代码编辑器修改
62 /// 此方法的内容。
63 /// </summary>
64 private void InitializeComponent()
65 {
66 this.Load += new System.EventHandler(this.Page_Load);
67
68 }
69 #endregion
70 }
71}
72
using System;2
using System.Collections;3
using System.ComponentModel;4
using System.Configuration;5
using System.Data;6
using System.Data.SqlClient;7
using System.Drawing;8
using System.Web;9
using System.Web.SessionState;10
using System.Web.UI;11
using System.Web.UI.WebControls;12
using System.Web.UI.HtmlControls;13
14
namespace admin15
{16
/// <summary>17
/// WebForm1 的摘要说明。18
/// </summary>19
public class WebForm1 : System.Web.UI.Page20
{21
protected System.Web.UI.WebControls.DropDownList DropDownList1;22
protected System.Web.UI.WebControls.DropDownList DropDownList2;23
24
private void Page_Load(object sender, System.EventArgs e)25
{26
// 在此处放置用户代码以初始化页面27
if(!this.IsPostBack)28
{29
SqlConnection Conn = new SqlConnection();30
Conn.ConnectionString = ConfigurationSettings.AppSettings["conn"].ToString();31
Conn.Open();32
string strSql = "select * from nlusr_type ";33
DataSet ds = new DataSet();34
SqlDataAdapter Adp = new SqlDataAdapter(strSql,Conn); 35
Adp.Fill(ds,"TypeIdList");36
DropDownList1.DataSource = ds.Tables["TypeIdList"].DefaultView;37
DropDownList1.DataTextField = "type";38
DropDownList1.DataValueField = "typeid";39
DropDownList1.DataBind();40
ListItem pitme=new ListItem("选择类别","0");41
DropDownList1.Items.Insert(0,pitme);42
DropDownList2.Items.Insert(0,pitme);43
//this.DropDownList1.Attributes.Add("onchange","load(this.options[this.selectedIndex].innerText)");44
this.DropDownList1.Attributes.Add("onchange","load(this.value)");45
}46
47
}48
49
50
#region Web 窗体设计器生成的代码51
override protected void OnInit(EventArgs e)52
{53
//54
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。55
//56
InitializeComponent();57
base.OnInit(e);58
}59
60
/// <summary>61
/// 设计器支持所需的方法 - 不要使用代码编辑器修改62
/// 此方法的内容。63
/// </summary>64
private void InitializeComponent()65
{ 66
this.Load += new System.EventHandler(this.Page_Load);67
68
}69
#endregion70
}71
}72
data.aspx.cs
1using System;
2using System.Collections;
3using System.ComponentModel;
4using System.Configuration;
5using System.Xml;
6using System.Data;
7using System.Data.SqlClient;
8using System.Drawing;
9using System.Web;
10using System.Web.SessionState;
11using System.Web.UI;
12using System.Web.UI.WebControls;
13using System.Web.UI.HtmlControls;
14
15namespace admin
16{
17 /// <summary>
18 /// data 的摘要说明。
19 /// </summary>
20 public class data : System.Web.UI.Page
21 {
22 private void Page_Load(object sender, System.EventArgs e)
23 {
24 // 在此处放置用户代码以初始化页面
25 if(this.Request["TypeId"]!=null)
26 {
27 string TypeId = this.Request["TypeId"].ToString();
28
29 SqlConnection Conn = new SqlConnection();
30
31 Conn.ConnectionString = System.Configuration.ConfigurationSettings.AppSettings["conn"].ToString();
32 Conn.Open();
33
34 string strSql = "select * from nlusr_news where type="+ TypeId ;
35
36 DataSet ds = new DataSet();
37
38 SqlDataAdapter Adp = new SqlDataAdapter(strSql,Conn);
39
40 Adp.Fill(ds,"Class");
41
42 XmlTextWriter writer = new XmlTextWriter(Response.OutputStream,System.Text.Encoding.UTF8);//Response.OutputStream, Response.ContentEncoding
43
44 writer.Formatting = Formatting.Indented;
45 writer.Indentation = 4;
46 writer.IndentChar = ' ';
47 ds.WriteXml(writer);
48 writer.Flush();
49 Response.End();
50 writer.Close();
51//
52 }
53
54 }
55
56 #region Web 窗体设计器生成的代码
57 override protected void OnInit(EventArgs e)
58 {
59 //
60 // CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。
61 //
62 InitializeComponent();
63 base.OnInit(e);
64 }
65
66 /// <summary>
67 /// 设计器支持所需的方法 - 不要使用代码编辑器修改
68 /// 此方法的内容。
69 /// </summary>
70 private void InitializeComponent()
71 {
72 this.Load += new System.EventHandler(this.Page_Load);
73
74 }
75 #endregion
76 }
77}
78
using System;2
using System.Collections;3
using System.ComponentModel;4
using System.Configuration;5
using System.Xml;6
using System.Data;7
using System.Data.SqlClient;8
using System.Drawing;9
using System.Web;10
using System.Web.SessionState;11
using System.Web.UI;12
using System.Web.UI.WebControls;13
using System.Web.UI.HtmlControls;14
15
namespace admin16
{17
/// <summary>18
/// data 的摘要说明。19
/// </summary>20
public class data : System.Web.UI.Page21
{22
private void Page_Load(object sender, System.EventArgs e)23
{24
// 在此处放置用户代码以初始化页面25
if(this.Request["TypeId"]!=null)26
{27
string TypeId = this.Request["TypeId"].ToString();28
29
SqlConnection Conn = new SqlConnection();30
31
Conn.ConnectionString = System.Configuration.ConfigurationSettings.AppSettings["conn"].ToString();32
Conn.Open();33
34
string strSql = "select * from nlusr_news where type="+ TypeId ;35
36
DataSet ds = new DataSet();37
38
SqlDataAdapter Adp = new SqlDataAdapter(strSql,Conn); 39
40
Adp.Fill(ds,"Class");41
42
XmlTextWriter writer = new XmlTextWriter(Response.OutputStream,System.Text.Encoding.UTF8);//Response.OutputStream, Response.ContentEncoding43
44
writer.Formatting = Formatting.Indented;45
writer.Indentation = 4;46
writer.IndentChar = ' ';47
ds.WriteXml(writer);48
writer.Flush();49
Response.End();50
writer.Close();51
//52
}53
54
}55
56
#region Web 窗体设计器生成的代码57
override protected void OnInit(EventArgs e)58
{59
//60
// CODEGEN: 该调用是 ASP.NET Web 窗体设计器所必需的。61
//62
InitializeComponent();63
base.OnInit(e);64
}65
66
/// <summary>67
/// 设计器支持所需的方法 - 不要使用代码编辑器修改68
/// 此方法的内容。69
/// </summary>70
private void InitializeComponent()71
{ 72
this.Load += new System.EventHandler(this.Page_Load);73
74
}75
#endregion76
}77
}78
