easyui-combobox实现级联查询

来源：互联网发布：unity3d 设置技能cd 编辑：程序博客网时间：2024/06/02 16:23

最近在做ITOO选课系统的成绩模块，其中添加一条成绩的比例信息时，需要使用到学年、课程、教师信息，而且课程和教师还是绑定好的，也就是如果课程确定下来，老师也是固定的，所以使用到combobox的级联查询，这里主要使用到该空间的onSelect属性，也就是由该属性再触发另一个URL，中途也因为空间id和name，可谓命运多舛了。

JSP控件定义(注意前3个combobox的id和name)：

<!-- 添加比例设置表单-和修改共用-----><div id="addResultRule" class="easyui-dialog" title="添加成绩比例信息" buttons="#dlg-buttons"><form id="fmResultRule" method="post" novalidate><div class="fitem"><label >学年:</label> <input class="easyui-combobox" id="schoolcalendarId" name="schoolcalendarId" required="true" data-options="valueField:'id',textField:'termName',url:'getSchoolCalendar' "/><br></div>            <div class="fitem"><label for="name">课程名称:</label> <input class="easyui-combobox" required="true" id="courseId" name="courseId"  data-options="editable:false" align="center"/><br></div><div class="fitem"><label for="name" >教师:</label> <input class="easyui-combobox" id="teacherId" name="teacherId" required="true" data-options="editable:false" align="center"/><br></div><div class="fitem"><label for="name">平时成绩比例:</label>  <input id="dailyResultRule" name="dailyResultRule" class="easyui-validatebox" type="text" required="true" /><br>        </div><div class="fitem"><label for="name">期末成绩比例:</label> <input id="finalResultRule" name="" required="true" class="easyui-validatebox" type="text" required="true" ></div></form></div>

JS代码：

思路：使用JS创建下来列表框，先通过URL得到课程的combo数据，然后选中一条数据后，通过onSelect获得其courseId传递给查询教师URL，做为该方法一个参数。

/* ===================添加时，根据课程加载该课程对应老师 ========start===================== */$(function(){$("#courseId").combobox({url : 'getCourseinfo',//查询课程的URLmethod : 'get',cache : false,valueField : 'id',textField : 'courseName',onSelect: function(data) {//获取选择的课程id  var courseId = data.id;$("#teacherId").combobox("setValue", '');//清空课程$.ajax({type : "POST",url : 'GetTeacher?courseId='+ courseId,//根据选中课程ID查询教师的URLdataType : "json",cache : false,async : false,success : function(data) {if (data == null) {$("#teacherId").combobox("loadData", '');alert("该课程下没有老师，请选择别的课程！");} else {$("#teacherId").combobox("loadData", data);}}});}});$("#teacherId").combobox({valueField : 'id',textField : 'name',onSelect : function(data) {//获取选择的课程idcourseId = data.id;}});});/* =============根据课程加载该课程对应老师 ========end================= */

效果图：

及时总结，积累中。

0 0