多级联动下拉列表Ajax方案实现

 

首先是生成下拉列表内容的jsp。这个jsp要生成XML文件，根据发来的参数把数据传到ajax异步请求中。XML可以用来传送比较复杂的数据，然后在javascript中进行解析，但下拉列表可以只传某个下拉列表中的数据，用不着很复杂。用jsp生成XML文件要注意，“%><%”等符号要注意非常紧密的排列，以生成出正确的XML文件。下面给出一段伪码。

<% @page contentType = " text/xml "  pageEncoding = " UTF-8 "
     import = " util.searchUtil, entity.*, java.util.* " %><%
            request.setCharacterEncoding( " UTF-8 " );
// 得到参数并处理，省略之
            List reqDataList  =  getYourDatas(par1, par2…); // 假设这里得到你要的数据后
            Iterator it  =  reqDataList.iterator();
// 下面生成XML文件内容
            out.println( " <?xml version="1.0" encoding="UTF-8"?> " );
            out.println( " <XML> " );
             while (it.hasNext()) ... {
                String item = it.next().toString();
                out.println("<opdata>"+item+"</opdata>");
            }
            out.println( " </XML> " );
            out.close();
%>

 

然后是有多级下拉列表的页面。基本思路非常直接，在页面loading时调用XMLHttp把第一级列表的数据得到，然后加入到第一级列表控件中。之后在第一级列表有选择的时候，发送新的XMLHttp请求给jsp页面，一般加上第一级列表选择的内容为参数，得到第二级列表的数据，再javascript中解析并加入数据到第二级列表。后面多级思路一样：第N级都是把前N-1级的数据作为参数异步请求，得到数据解析后加入N级下拉列表中。说一下这里常用的几个javascript函数。

1.       getElementsByTagName用来从XML文档中得到对应标签的数据，一般为数组

2.       getElementById得到HTML文件中控件引用，方便下面对它进行处理

3.       sel.options.add(new Option("key", "value"))用这个来加入数据到下拉列表中。参数顺序不记得了，可能有误。

下面给出项目中的HTML代码（有改动）。

<! DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" >
< html  xmlns ="http://www.w3.org/1999/xhtml" >
     < head >
         < script  type ="text/javascript" > ...
            var req;
            
            function getXMLHttpRequest()...{
                if(window.ActiveXObject)...{
                    req = new ActiveXObject("Microsoft.XMLHTTP");
                }
                else if(window.XMLHttpRequest)...{
                    req = new XMLHttpRequest();
                }    
            }
            
            function getGC_Data()...{
                if(!req) getXMLHttpRequest();
                req.open("post", "XmlData_jj.jsp?ptyName=GC", true);
                req.onreadystatechange = gcCallBack;
                req.send(null);
            }
            
            function gcCallBack()...{
                if(req.readyState==4)...{
                    if(req.status==200)...{
                        var img = document.getElementById("loading");
                        img.style.visibility = "hidden";
                        var doc = req.responseXML;
                        var opts = doc.getElementsByTagName("opdata");
                        var sel = document.getElementById("selGC");
                        sel.options.add(new Option("--请选择--", "--请选择--"));
                        for(var i=0; i<opts.length; i++)...{
                            sel.options.add(new Option(opts[i].text, opts[i].text));
                        }
                    }
                }
            }
            
            function getXMData()...{
                var sel = document.getElementById("selGC");
                if (sel.selectedIndex == 0) return;
                if(!req) getXMLHttpRequest();
                req.open("post", "XmlData_jj.jsp?ptyName=XM&GC="+
                    encodeURI(sel.options[sel.selectedIndex].value), true);
                req.onreadystatechange=xmCallback;
                req.send(null);
            }
            
            function xmCallback()...{
                if(req && (req.readyState == 4))...{
                    if(req.status == 200)...{
                        var doc = req.responseXML;
                        var opts = doc.getElementsByTagName("opdata");
                        
                        //clear all dropdownlist below
                        document.getElementById("selTZ").options.length = 0;
                        document.getElementById("selTH").options.length = 0;
                        
                        var sel = document.getElementById("selXM");
                        sel.options.length = 0;
                        sel.options.add(new Option("--请选择--", "--请选择--"));
                        for(var i=0; i<opts.length; i++)...{
                            sel.options.add(new Option(opts[i].text, opts[i].text));
                        }
                    }
                }
            }
            
            
            
            function getTZData()...{
                var selGC = document.getElementById("selGC");
                var selXM = document.getElementById("selXM");
                if (selXM.selectedIndex == 0) return;
                if(!req) getXMLHttpRequest();
                req.open("post", "XmlData_jj.jsp?ptyName=TZ&GC="+
                    encodeURI(selGC.options[selGC.selectedIndex].value)+
                    "&XM="+encodeURI(selXM.options[selXM.selectedIndex].value)
                    , true);
                req.onreadystatechange=tzCallback;
                req.send(null);
            }
            
            function tzCallback()...{
                if(req && (req.readyState == 4))...{
                    if(req.status == 200)...{
                        var doc = req.responseXML;
                        var opts = doc.getElementsByTagName("opdata");
                        //clear
                        document.getElementById("selTH").options.length = 0;
                        
                        var sel = document.getElementById("selTZ");
                        sel.options.length = 0;
                        sel.options.add(new Option("--请选择--", "--请选择--"));
                        for(var i=0; i<opts.length; i++)...{
                            sel.options.add(new Option(opts[i].text, opts[i].text));
                        }
                    }
                }
            }
            
            function getTHData()...{
                var selGC = document.getElementById("selGC");
                var selXM = document.getElementById("selXM");
                var selTZ = document.getElementById("selTZ");
                if (selTZ.selectedIndex == 0) return;
                if(!req) getXMLHttpRequest();
                req.open("post", "XmlData_jj.jsp?ptyName=TH&GC="+
                    encodeURI(selGC.options[selGC.selectedIndex].value)+
                    "&XM="+encodeURI(selXM.options[selXM.selectedIndex].value)+
                    "&TZ="+encodeURI(selTZ.options[selTZ.selectedIndex].value)
                    , true);
                req.onreadystatechange=thCallback;
                req.send(null);
            }
            
            function thCallback()...{
                if(req && (req.readyState == 4))...{
                    if(req.status == 200)...{
                        var doc = req.responseXML;
                        var opts = doc.getElementsByTagName("opdata");
                        
                        var sel = document.getElementById("selTH");
                        sel.options.length = 0;
                        sel.options.add(new Option("--请选择--", "--请选择--"));
                        for(var i=0; i<opts.length; i++)...{
                            sel.options.add(new Option(opts[i].text, opts[i].text));
                        }
                    }
                }
            }
            
            window.onload = getGC_Data;
            
         </ script >
        
         < meta  http-equiv ="Content-Type"  content ="text/html; charset=utf-8"   />
         < link  type ="text/css"  rel ="StyleSheet"  href =".. esourcesmyCss.css"   />
         < title > 查询向导 </ title >
     </ head >
    
     < body >
         < div  class ="pageTitle" > 查询向导 </ div >
         < div >
             < form  id ="form1"  method ="post"  target ="_blank"  action ="jjList.jsp" >
                 < input  type ="hidden"  name ="isAllMatch"  value ="True"   />
                 < table  class ="layout" >
                     < tr >
                         < td > Droplist1： </ td >< td >< select  id ="selGC"  name ="gc"  onchange ="getXMData()" ></ select >
                             < img  id ="loading"  src =".. esourcesloading.gif" />
                         </ td >
                     </ tr >
                     < tr >
                         < td >  Droplist2： </ td >< td >< select  id ="selXM"  name ="xm"  onchange ="getTZData()" ></ select ></ td >
                     </ tr >
                     < tr >
                         < td >  Droplist3: </ td >< td >< select  id ="selTZ"  name ="tz"  onchange ="getTHData()" ></ select ></ td >
                     </ tr >
                     < tr >
                         < td >  Droplist4: </ td >< td >< select  id ="selTH"  name ="th" ></ select ></ td >
                     </ tr >
                 </ table >
                 < div  style ="padding:10px" >< button  class ="Btn1"  type ="submit" > 点击查询 </ button ></ div >
             </ form >
         </ div >
     </ body >
</ html >

 

---

这文章编译了N遍，终于知道有什么“关键词”不让发表了。我页面中“得到工程数据”的函数是由拼音和英文缩写成，get_G_C_Data(如果没有下划线，几个大写字母竟然成了过滤的关键字。CSDN应该找人来直接审文章好了，直接用机器作这个事，真是问题多多，都不知道哪个字有问题，程序中的代码都能搞出问题来，无言了。