ajax实现无刷屏级联下拉框-优快云博客

本文链接：https://blog.youkuaiyun.com/Iamarmy/article/details/2841173

本文介绍了一个使用AJAX动态加载下拉框选项的示例。通过客户端JavaScript发起AJAX请求，根据用户的选择从服务器获取数据，并更新第二个下拉框的内容。此示例展示了如何在不刷新页面的情况下动态填充选项。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

http_request = null ;
3

function doAJAX()
4

{
5

if (window.XMLHttpRequest)
6

{
7

http_request=new XMLHttpRequest();
8

}
9

else (window.ActiveXObject)
10

{
11

http_request=new ActiveXObject("Microsoft.XMLHTTP");
12

}
13

http_request.onreadystatechange = GetDate;
14

var S = document.Form1.select1.value;
15

alert(S);
16

var url='WebForm2.aspx?sABC='+escape(S);
17

http_request.open('POST',url,true);
19

var dataSet='sABC='+escape(S);
20

http_request.send(null);
21

}
22

function GetDate()
23

{
24

if (http_request.readyState==4)
25

{
26

if(http_request.status==200)
27

{
28

var a= http_request.responseText.split(",");
30

//清空原来的OPTIONS
31

var nL = document.Form1.select2.options.length;
32

while(nL>1)
33

{
34

alert(document.Form1.select2.options.length);
35

document.Form1.select2.remove(document.Form1.select2.options.length-1);
36

nL = document.Form1.select2.options.length;
37

}
38

for(i=0;i<a.length;i++)
39

{
40

var opt=new Option();
41

opt.value=a[i] ;
42

opt.text=a[i];
43

var sel1Object = document.Form1.select2;
44

sel1Object.add(opt);
45

}
46

}
48

}
49

}
50

private void Page_Load( object sender, System.EventArgs e)
2

{
3

string str;
4

// 在此处放置用户代码以初始化页面
5

string li= this.Request.Headers.ToString();
6

this.Request.Headers.GetValues(0);
7

if(Request.QueryString["sABC"]!=null)
8

{
9

string aaa="";
10

str = Request.QueryString["sABC"].ToString();
11

ajaxDAL.Class1 test = new Class1();
13

ArrayList al = test.Test(str);
14

for(int i =0;i<al.Count;i++)
15

{
16

aaa+= al[i].ToString()+",";
17

}
18

aaa = aaa.Remove(aaa.Length-1,1);
19

Response.Write(aaa);
20

Response.End();
21

}
22

}
23

public ArrayList Test( string s)
26

{
27

ArrayList al = new ArrayList();
28

if(s=="美亚在线")
29

{
30

al.Add("市场部");
31

al.Add("开发部");
32

}
33

if(s=="美亚商旅")
34

{
35

al.Add("商旅中心");
36

al.Add("物流部");
37

}
38

return al;
39

}
40

Feedback

以上内容来自AJAX实例站： http://www.ajaxsamples.cn/html/10916.html