最近在做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',//查询课程的URL
method : '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查询教师的URL
dataType : "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) {
//获取选择的课程id
courseId = data.id;
}
});
});
/* =============根据课程加载该课程对应老师 ========end================= */