原创文章

easyui下拉框动态级联加载的示例代码       本篇文章主要介绍了easyui下拉框动态级联加载的示例代码，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧

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

1.界面效果

2. html + js代码

 span 学院名称： /span 
 input id="collegeName" 
 span 课程名称： /span 
 input id="courseName" br/ 

$('#collegeName').combobox({ url:'${pageContext.request.contextPath}/loadInstitution', editable:false, //不可编辑状态 cache: false, panelHeight: '150', valueField:'id', textField:'institutionName', onHidePanel: function(){ $("#courseName").combobox("setValue",'');//清空课程 var id = $('#collegeName').combobox('getValue'); //alert(id); $.ajax({ type: "POST", url: '${pageContext.request.contextPath}/loadCourse id=' + id, cache: false, dataType : "json", success: function(data){ $("#courseName").combobox("loadData",data); }); $('#courseName').combobox({ //url:'itemManage!categorytbl', editable:false, //不可编辑状态 cache: false, panelHeight: '150',//自动高度适合 valueField:'id', textField:'courseName' });

3.后台代码

@RequestMapping("/loadInstitution") 
 /** 
 * 加载学院 
 * @param 
 * @param 
 * @return void 
 * @exception/throws [违例类型] [违例说明] 
 * @see [类、类#方法、类#成员] 
 * @deprecated 
 public void loadInstitute(HttpServletRequest request, 
 HttpServletResponse response) throws Exception { 
 try { 
 JackJsonUtils JackJsonUtils = new JackJsonUtils(); 
 List Institution institutionList = institutionBean 
 .queryAllColleage(); 
 System.out.println("学院list大小=====" + institutionList.size()); 
 String result = JackJsonUtils.BeanToJson(institutionList); 
 System.out.println(result); 
 JsonUtils.outJson(response, result); 
 } catch (Exception e) { 
 logger.error("加载学院失败", e); 
 @RequestMapping("/loadCourse") 
 /** 
 * 动态加载课程 
 * @param 
 * @param 
 * @return void 
 * @exception/throws [违例类型] [违例说明] 
 * @see [类、类#方法、类#成员] 
 * @deprecated 
 public void loadCourse(HttpServletRequest request, 
 HttpServletResponse response) throws Exception { 
 JackJsonUtils JackJsonUtils = new JackJsonUtils(); 
 String id = request.getParameter("id"); 
 System.out.println("学院id====" + id); 
 try { 
 if(id != null id != ""){ 
 List CourseInfo listCourseInfoList = courseBean 
 .queryAllCourseInfos(id); 
 System.out.println("课程list大小=====" + listCourseInfoList.size()); 
 String result = JackJsonUtils.BeanToJson(listCourseInfoList); 
 System.out.println(result); 
 JsonUtils.outJson(response, result); 
 } catch (Exception e) { 
 logger.error("加载课程失败", e); 
 

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

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持凡科。