基于Ajax(DWR)的二级联动下拉菜单

很多朋友在做多级联动下拉菜单时都碰到了问题，Google上能找到的大部分也是基于javascript数组的实现，超多3级联动时，就会很复杂，甚至出现4维、5维的数组。这里介绍一个Ajax的方法，也是页面无刷新的，但是是从数据库实时查询的,在数据量大时较js数组的方法性能要好很多，实现起来也方便。

废话少说，直接看代码：
由于大家用的数据库五花八门，我就用几个数组来代替rs，在实际应用中只要把实时查询的结果集rs替换掉数据就可以了。

我这里采用了一个ajax的框架：DWR，这个是把java代码影射成js的一个工具。

index.htm

< html >  

< script  src ="/dwr/dwr/interface/ItemsBean.js" ></ script >  
< script  src ="/dwr/dwr/engine.js" ></ script >  
< script  src ="/dwr/dwr/util.js" ></ script >  

< script  language ="javascript" > ...   
function update1() 
...{ 
       ItemsBean.ClassList(createList1); 
} 
function createList1(data) 
...{ 
    DWRUtil.removeAllOptions("classid"); 
    DWRUtil.addOptions("classid", data); 
} 

function update2() 
...{ 
       ItemsBean.UserList(DWRUtil.getValue("classid"),createList2); 
} 
function createList2(data) 
...{ 
    DWRUtil.removeAllOptions("userid"); 
    DWRUtil.addOptions("userid", data); 
} 

</ script >  

< head >  
< meta  http-equiv ="Content-Type"  content ="text/html; charset=gb2312" >  
< title > 班级和学生Ajax级联下拉菜单 </ title >  
</ head >  

< body  onload ="update1()" >  

< form  name ="formform" >  
    班级 < select  name ="classid"  id ="classid"  onchange ="javascript:update2();" ></ select >   
    学生 < select  name ="userid"  id ="userid" ></ select >  
</ form >  

</ body >  

</ html >  

 ItemsBean.java

package  org.baiyun; 

import  java.util. * ; 
/** */ /** 
 * 
 * @author baiyun 
 */  
public   class  ItemsBean  ... { 
    private String[] class1 = ...{"同学1","同学2","同学3","同学4","同学5","同学6"}; 
    private String[] class2 = ...{"同学7","同学8","同学9","同学10"}; 
    private String[] class3 = ...{"同学11","同学12","同学13","同学14","同学15","同学16","同学17"}; 
    private String[] class4 = ...{"同学18","同学19","同学20"}; 
    private String[] class5 = ...{"同学21","同学22","同学23","同学24","同学25","同学26"}; 
    /** *//** Creates a new instance of ItemsBean */ 
    public ItemsBean() ...{ 
    } 
     
    public Map ClassList() ...{ 
        Map reply = new LinkedHashMap(); 
        reply.put("0", "所有"); 
        reply.put("1", "班级1"); 
        reply.put("2", "班级2"); 
        reply.put("3", "班级3"); 
        reply.put("4", "班级4"); 
        reply.put("5", "班级5"); 
        return reply; 
    } 
     
    public Map UserList(String CLASSID) ...{ 
        Map reply = new LinkedHashMap(); 
        reply.put("0", "所有"); 
         
        // 这里用数组模拟数据库查询结果。 
        // 真实环境中，你只要将数据库查询结果放入到reply里面就可以了。 
        // reply的id就是返回后下拉框的option的value，reply的value就是返回后下拉框的option的text。 
        // 如: sql = "select * from users where classid=?"; 
        if(CLASSID==null || CLASSID.equals("") || CLASSID.equals("0"))...{ 
            // 
        }else if(CLASSID.equals("1"))...{ 
            int id =1; 
            for(int i=0;i<class1.length;i++)...{ 
                reply.put(""+id, class1[i]); 
                id++; 
            } 
        }else if(CLASSID.equals("2"))...{ 
            int id =1; 
            for(int i=0;i<class2.length;i++)...{ 
                reply.put(""+id, class2[i]); 
                id++; 
            } 
        }else if(CLASSID.equals("3"))...{ 
            int id =1; 
            for(int i=0;i<class3.length;i++)...{ 
                reply.put(""+id, class3[i]); 
                id++; 
            } 
        }else if(CLASSID.equals("4"))...{ 
            int id =1; 
            for(int i=0;i<class4.length;i++)...{ 
                reply.put(""+id, class4[i]); 
                id++; 
            } 
        }else if(CLASSID.equals("5"))...{ 
            int id =1; 
            for(int i=0;i<class5.length;i++)...{ 
                reply.put(""+id, class5[i]); 
                id++; 
            } 
        } 
         
        return reply; 
    } 
}

web.xml

<? xml version="1.0" encoding="UTF-8" ?>  
<! DOCTYPE web-app PUBLIC "-//Sun Microsystems, Inc.//DTD Web Application 2.3//EN" "http://java.sun.com/dtd/web-app_2_3.dtd" >  

< web-app >  
   < servlet >  
     < servlet-name > dwr-invoker </ servlet-name >  
     < display-name > DWR Servlet </ display-name >  
     < servlet-class > uk.ltd.getahead.dwr.DWRServlet </ servlet-class >  
     < init-param >  
       < param-name > debug </ param-name >  
       < param-value > true </ param-value >  
     </ init-param >  
   </ servlet >  
   < servlet-mapping >  
     < servlet-name > dwr-invoker </ servlet-name >  
     < url-pattern > /dwr/* </ url-pattern >  
   </ servlet-mapping >  

   < welcome-file-list >  
     < welcome-file > index.htm </ welcome-file >  
   </ welcome-file-list >  
</ web-app >

dwr.xml: 是让js和java直接通讯，很神奇吧~ 这就是dwr的贡献

<? xml version="1.0" encoding="gbk" ?>  
<! DOCTYPE dwr PUBLIC 
    "-//GetAhead Limited//DTD Direct Web Remoting 1.0//EN" 
    "http://www.getahead.ltd.uk/dwr/dwr10.dtd" >  

< dwr >  
   < allow >  
     < create  creator ="new"  javascript ="ItemsBean" >  
       < param  name ="class"  value ="org.baiyun.ItemsBean" />  
     </ create >  

   </ allow >  
</ dwr >

就这么简单，运行以下试试看吧~。
若要实现3级、4级、5级...的下拉菜单，只要以此类推一级级延下去就可以了，也很简单的。
注意:需要加dwr.jat  xalan.jar