利用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>

　　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>

<TR>

<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

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

namespace 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

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

}
48

#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

/// <summary>
61

/// 设计器支持所需的方法 - 不要使用代码编辑器修改
62

/// 此方法的内容。
63

/// </summary>
64

private void InitializeComponent()
65

{
66

this.Load += new System.EventHandler(this.Page_Load);
67

}
69

#endregion
70

}
71

}
72

data.aspx.cs

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

namespace 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

SqlConnection Conn = new SqlConnection();
30

Conn.ConnectionString = System.Configuration.ConfigurationSettings.AppSettings["conn"].ToString();
32

Conn.Open();
33

string strSql = "select * from nlusr_news where type="+ TypeId ;
35

DataSet ds = new DataSet();
37

SqlDataAdapter Adp = new SqlDataAdapter(strSql,Conn);
39

Adp.Fill(ds,"Class");
41

XmlTextWriter writer = new XmlTextWriter(Response.OutputStream,System.Text.Encoding.UTF8);//Response.OutputStream, Response.ContentEncoding
43

　　 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

}
55

#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

/// <summary>
67

/// 设计器支持所需的方法 - 不要使用代码编辑器修改
68

/// 此方法的内容。
69

/// </summary>
70

private void InitializeComponent()
71

{
72

this.Load += new System.EventHandler(this.Page_Load);
73

}
75

#endregion
76

}
77

}
78

posted on 2005-06-21 16:34 shp_yt 阅读(852) 评论(0) 收藏举报

刷新页面返回顶部

shp_yt

导航

公告

利用JavaScript+XmlHttp实现DropDownList无刷新联动