easyui下拉框赋值 ajax,easyui下拉框动态级联加载的示例代码

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

1.界面效果

2. html + js代码

学院名称：

Box" style="width:30%;" id="collegeName">

课程名称：

Box" style="width:30%;" id="courseName">

内容是动态查询数据库信息

$('#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',//不可编辑状态

cache: false,//自动高度适合

valueField:'id',textField:'courseName'

});

});

方法、类#成员]

* @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 != ""){

ListlistCourseInfoList = 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格式后绑定到前台控件上。

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

总结

如果觉得编程之家网站内容还不错，欢迎将编程之家网站推荐给程序员好友。

本图文内容来源于网友网络收集整理提供，作为学习参考使用，版权属于原作者。