基于埃阿斯实现下拉框联动显示数据

公司做项目的时候，需要用到下拉框联动显示数据的功能，索性利用埃阿斯来实现，看到时间比较充裕，就没去找演示自己去想方法写了。纯自己的想法，有些可能比较弱智，希望不要见笑。

页面中的两个下拉列表框：

tr td style='width: 130px '所在学院：/TD TD TD style=' width : 100px ' select id=' college ' style=' width : 200px ' runat=' server ' on change=' changcollege(this。值)'选项值='0' -请选择所在学院学院-/option/select/TD/tr tr TD style='宽度： 130 px '所在专业：/TD TD TD style=' width : 100px ' select id=' special ' style=' width : 200px ' runat=' server ' on change=' save special(this。值)'选项值='0' -请选择所在专业- /option /select/td /trJS脚本代码：

脚本类型=' text/JavaScript ' var http _ request=false；函数发送请求(方法、网址、内容、响应类型、回调)//定义发送请求的函数{ http _ request=falseif(窗口. XMLHttpRequest){ http _ request=new XMLHttpRequest()；if(http _ request。override metype){ http _ request。override metype(' text/XML ')；} } else { try { http _ request=new ActiveX对象(' Msxml 2 .XMLHTTP’)；} catch(e){ try { http _ request=new ActiveX对象(' Microsoft .XMLHTTP’)；} catch(e) {} } } if(！http_request) { window.alert('创建XMLHttpRequest对象失败');返回false} if(responsetype。tolowercase()=' text '){ http _ request。onreadystatechange=回调；} else { window。警报(' ERR ')；返回false} if(方法。tolowercase()==' get '){ http _ request。open(方法、url、true)；} else if(方法。tolowercase()==' post '){ http _ request。open(方法、url、true)；http _ request。setrequest头(' Content-Type '，' application/x-www-form-URL编码')；} else { window。警报(' Err ')；返回false} http _ request。发送(内容)；}函数昌学院(弗吉尼亚州)//当学院下拉列表发生改变时触发的脚本事件{ if(va！=' 0 '){ var special=document。getelementbyid(' special ')；specialty . disabled=false var URL=' Handler . ashx？type=college id=' vas end _ request(' GET '，url，null，' text '，填充类3)；} }函数populateClass3()//Ajax执行成功的回调函数{ var f=文档。getelementbyid(' special ')；if(http _ request。readystate==4){ if(http _ request。status==200){ var list=http _ request。responsetextvar CLaSS list=list。拆分(' | ')；f .选择。长度=1；for(var I=0；iclassList.lengthi ) //将取得的结果添加到下级的列表框中{ var tmp=classList[i].split('，')；f.add(新选项(tmp[1]，tmp[0])；} } else { alert('您所请求的页面有异常。');} } }/脚本我们将超文本传送协议(超文本传输协议的缩写)请求发送给服务端的Handler.ashx进行处理。

公共类处理程序： IHttpHandler { public void process request(HttpContext context){ string type=context .请求。查询字符串[' type ']；如果(键入等于(' college '){ string id=context .请求。查询字符串[' id ']；语境。响应。内容类型='文本/纯文本；语境。回应。写(getSpecialty(id))；//这个是从数据库中根据传来省的编号查询出来的。学院的名字和主键，主键以便去查专业的名字} }公共字符串getSpecialty(字符串学院){ DataSet ds=GetInformation .GetSpecialtyInfo(学院);字符串str=for(int I=0；我拒绝了。表[0].行。计数；i ) { if (i==ds .表[0].划船。count-1){ str=ds .表[0]。行[i]['SpecialtyID'].ToString()'，' ds .表[0]。行[我]['特殊名称'].ToString()；} else { str=ds .表[0]。行[i]['SpecialtyID'].ToString()'，' ds .表[0]。行[我]['特殊名称'].ToString()" | "；} }返回字符串trim()；} public bool IsReuse { get { return false；} }}根据学院的编号获得相应的专业，并将专业的名称用"|"分割组合成字符串返回给客户端，客户端脚本拆分字符串添加到下拉框中。

这里只是二级的联动显示，三级联动数据的现实原理是一样的。

本文的全部内容就到此结束了，希望大家学习埃阿斯实现下拉框联动显示数据有所帮助。