最新下载
热门教程
- 1
- 2
- 3
- 4
- 5
- 6
- 7
- 8
- 9
- 10
easyui下拉框动态级联加载的示例代码
时间:2017-12-19 编辑:猪哥 来源:一聚教程网
easyui的下拉框动态加载数据,高校中要根据首先查询所有学院,然后根据学院动态加载课程。下面看如何实现。
1.界面效果
2. html + js代码
学院名称: 课程名称:
$(function() { // 下拉框选择控件,下拉框的内容是动态查询数据库信息 $('#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(); ListinstitutionList = 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 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); } }
-
上一个: 纯js实现隔行变色效果
-
下一个: 3种vue组件的书写形式
相关文章
- js实现音乐播放器代码展示 10-12
- js实现图片查看器代码展示 10-12
- JS中switch的四种写法介绍 10-12
- js实现新闻轮播效果教程 10-11
- JS实现简单的图片切换功能教程 10-11
- js实现下拉刷新和上拉加载解析 09-28