web前端|js教程
easyui,实现,加载
web前端-js教程
公墓源码,vscode菜单栏消失,ubuntu怎么黑屏,tomcat主页显示不了,robots协议爬虫,php多线程爬虫,昆明seo排名优化价格,竞标网站源码下载,17模板网小说手机lzw
这次给大家带来easyui的下拉框动态级联加载的实现方法（附代码），easyui下拉框动态级联加载的注意事项有哪些，下面就是实战案例，一起来看一下。
锦尚中国源码,前端vscode 必备插件,ubuntu开exe,tomcat端口配置流程,片状爬虫,php打印控件,seo教程视频长尾词,html5网站模板动漫网站模板,电器参数模板lzw
easyui的下拉框动态加载数据，高校中要根据首先查询所有学院，然后根据学院动态加载课程。下面看如何实现。
健客两性网源码下载,ubuntu删除log日志,爬虫gb2312,php开放,seo青鹏lzw
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(); List 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 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格式后绑定到前台控件上。
