使用AJAX更新级联下拉框

最新推荐文章于 2021-08-06 17:47:14 发布

weixin_30701521

最新推荐文章于 2021-08-06 17:47:14 发布

阅读量70

点赞数

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/oldhorse/archive/2007/08/21/864089.html

本文提供了一个使用AJAX实现级联下拉框的具体示例，包括前端JavaScript代码和后端处理逻辑。通过POST请求传递参数，并在响应中返回XML格式的数据，用于动态更新下拉菜单选项。

AJAX也不是什么新技术，只是自己没有用过，最近看了点资料，刚好用在项目中试试

，其他的废话就不说了，网上一搜索一大堆，直接贴代码：
js脚本如下：

1 var xmlHttp ;
2         function createXMLHttpRequest() {
3             if (window.ActiveXObject) {
4
5                     xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");
6                 }
7             else if (window.XMLHttpRequest) {
8                         xmlHttp = new XMLHttpRequest();
9             }
10         }
11
12         function changValue()
13         {
14            createXMLHttpRequest() ;
15            var Type = document.all.DpwType.value ;
16             xmlHttp.open("POST", "GetDownValue.aspx?Type="+Type, true);
17             xmlHttp.onreadystatechange = handleStateChange ;
18            xmlHttp.send(null);
19         }
20
21         function handleStateChange()
22         {
23             if(xmlHttp.readyState == 4) {
24                 if(xmlHttp.status == 200) {
25                   var   responseXML=xmlHttp.responseXML.getElementsByTagName("typeValue");
26                   var e = document.all.DpwLevel ;
27                    for(var i=0;i<e.options.length;i++)
28                   {
29                      e.remove(i);
30                   }
31                   e.options.add(new Option("", ""));
32
33
34                   for( var k = 0 ; k < responseXML.length ; k++ )
35                   {
36                      var typename = responseXML[k].firstChild.nodeValue;
37                      e.options.add(new Option(typename, typename));
38                   }
39                 }
40             }
41         }

后台代码如下：

1     if( Request.QueryString["Type"] != "" )
2             {
3                 string type = Request.QueryString["Type"].ToString().Trim() ;
4                 if(  type  == "1" )
5                 {
6                     type = "HortationLevel" ;
7                 }
8                 if( type  == "2"  )
9                 {
10                     type = "PunishLevel" ;
11                 }
12                 StringBuilder   str  = new   StringBuilder();
13                 string sql = @"select * from ItemAttribute where TypeClass = '"+type+"' " ;
14                 DataSet ds = DbTool.ExecuteDataSet( sql ) ;
15                 str.Append("<type>");
16                 for( int i= 0 ; i < ds.Tables[0].Rows.Count ; i++ )
17                 {
18                     str.Append("<typeValue>");
19                     str.Append(  ds.Tables[0].Rows[i]["typeName"].ToString() );
20                     str.Append("</typeValue>");
21                 }
22                 str.Append("</type>");
23
24                 Response.ContentType="text/xml";
25                 Response.Write( str );
26                 Response.End()  ;
27             }

ok，一个简单的级联下拉框的刷新就可以搞定了。。。

转载于:https://www.cnblogs.com/oldhorse/archive/2007/08/21/864089.html