easyui的下拉框动态加载数据，高校中要根据首先查询所有学院，然后根据学院动态加载课程。下面看如何实现。
1.界面效果
2. html + js代码
<span>学院名称：</span> <input class="easyui-combobox" style="width:30%;" id="collegename"> <span>课程名称：</span> <input class="easyui-combobox" style="width:30%;" id="coursename"><br/>
$(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<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格式后绑定到前台控件上。
相信看了本文案例你已经掌握了方法，更多精彩请关注其它相关文章！
推荐阅读：
有哪些vue组件的书写方法
通过js获取json数据并加载的步骤详解
js怎样让元素沿着抛物线轨迹运动
以上就是easyui的下拉框动态级联加载的实现方法（附代码）的详细内容。