easyui下拉框动态级联加载

easyui的下拉框动态加载数据，高校中要根据首先查询所有学院，然后根据学院动态加载课程。下面看如何实现。

1.界面效果

 

2. html + js代码

[html] view plain copy print?

1. <span>学院名称：</span>  
2. <input class="easyui-combobox"  style="width:30%;"  id="collegeName">  
3. <span>课程名称：</span>  
4. <input class="easyui-combobox"  style="width:30%;" id="courseName"><br/>  

[javascript] view plain copy print?

1. $(function() {        
2.       // 下拉框选择控件，下拉框的内容是动态查询数据库信息  
3.       $('#collegeName').combobox({   
4.               url:'${pageContext.request.contextPath}/loadInstitution',   
5.               editable:false, //不可编辑状态  
6.               cache: false,  
7.               panelHeight: '150',  
8.               valueField:'id',     
9.               textField:'institutionName',  
10.                 
11.         onHidePanel: function(){  
12.             $("#courseName").combobox("setValue",'');//清空课程  
13.             var id = $('#collegeName').combobox('getValue');          
14.             //alert(id);  
15.               
16.           $.ajax({  
17.             type: "POST",  
18.             url: '${pageContext.request.contextPath}/loadCourse?id=' + id,  
19.             cache: false,  
20.             dataType : "json",  
21.             success: function(data){  
22.             $("#courseName").combobox("loadData",data);  
23.                      }  
24.                 });       
25.              }  
26. });      
27.         
28.       $('#courseName').combobox({   
29.           //url:'itemManage!categorytbl',   
30.           editable:false, //不可编辑状态  
31.           cache: false,  
32.           panelHeight: '150',//自动高度适合  
33.           valueField:'id',     
34.           textField:'courseName'  
35.          });  
36.         
37. });  

3.后台代码

[java] view plain copy print?

1. @RequestMapping("/loadInstitution")  
2.     /** 
3.      * 加载学院 
4.      * @param   
5.      * @param   
6.      * @return void 
7.      * @exception/throws [违例类型] [违例说明] 
8.      * @see          [类、类#方法、类#成员] 
9.      * @deprecated 
10.      */  
11.     public void loadInstitute(HttpServletRequest request,  
12.             HttpServletResponse response) throws Exception {  
13.         try {  
14.             JackJsonUtils JackJsonUtils = new JackJsonUtils();  
15.             List<Institution> institutionList = institutionBean  
16.                     .queryAllColleage();  
17.             System.out.println("学院list大小=====" + institutionList.size());  
18.             String result = JackJsonUtils.BeanToJson(institutionList);  
19.             System.out.println(result);  
20.             JsonUtils.outJson(response, result);  
21.         } catch (Exception e) {  
22.             logger.error("加载学院失败", e);  
23.         }  
24.     }  
25.   
26.     @RequestMapping("/loadCourse")  
27.     /** 
28.      * 动态加载课程 
29.      *  
30.      *  
31.      * @param   
32.      * @param   
33.      * @return void 
34.      * @exception/throws [违例类型] [违例说明] 
35.      * @see          [类、类#方法、类#成员] 
36.      * @deprecated 
37.      */  
38.     public void loadCourse(HttpServletRequest request,  
39.             HttpServletResponse response) throws Exception {  
40.         JackJsonUtils JackJsonUtils = new JackJsonUtils();  
41.         String id = request.getParameter("id");  
42.         System.out.println("学院id====" + id);  
43.         try {  
44.             if(id != null && id != ""){  
45.                 List<CourseInfo> listCourseInfoList = courseBean  
46.                         .queryAllCourseInfos(id);  
47.                 System.out.println("课程list大小=====" + listCourseInfoList.size());  
48.                 String result = JackJsonUtils.BeanToJson(listCourseInfoList);  
49.                 System.out.println(result);  
50.                 JsonUtils.outJson(response, result);  
51.             }  
52.         } catch (Exception e) {  
53.             logger.error("加载课程失败", e);  
54.         }  
55.     }  

 
                   根据基础提供的接口查询学院和课程，转换为json格式后绑定到前台控件上。