easyui-combobox实现级联查询

       最近在做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================= */

效果图：

及时总结，积累中。