easyUI 级联下拉框（二）

这一篇简绍级联下拉框：

这是要做的效果：

根据课程加载题型。

简绍实现的HTMl，使用的是拼接ＨＴＭＬ　方式

<div id="mustField">
	<table>
		<tr>
			<th width="40px;">课程</th>
			<th>
				<div class="dropdown" style="“margin-bottom: 15px”">
				<!-- 下拉列表   可以写事件 -->
				<div>
					<select id="courseName" οnchange="selectCourse()" class="form-control" style="width:180px;"> 
					
					</select>
				</div>
			</div></th>
		</tr>
		<tr>
			<th>题型</th>
			<th>
				<div class="dropdown" style="“margin-bottom: 15px；”">
				<!-- 下拉列表   可以写事件 -->
				<div>
					<select id="questionType" name="mySelect" οnchange="selectQuestionType()" class="form-control" style="width:180px;">
					</select>
				</div>
			</div></th>
		</tr>
	</table>
</div> 

下面是实现的相关的ＪＳ：

/*窗体加载页面，初始化题型数据*/
		$(document).ready(
				function() {
					/*课程数据*/
					$.ajax({
						type : 'POST',
						async : false,
						url : ctx + "/findCourseByTeacherCode", 
						dataType : 'text',
						success : function(data) {
							var lstCourse = eval(data);
							var htmlCourse = "";
							if (lstCourse.length == 0) {
								htmlCourse += '<option id="">'
										+ '没有您对应的课程'
										+ '</option><br>';
							}
							$(lstCourse).each( //拼写课程下拉框
									function(i) {
										var mapCourse = lstCourse[i];
										htmlCourse += '<option id="'+ mapCourse["courseId"]+'">'
													+ mapCourse["courseName"]
													+ '</option><br>';
											});
								
							$("#loadCourse").append(htmlCourse);
						}
					});	
					/*//设置课程默认值  原来的courseId就是现在的loadCourse
					$('#courseId').find("option[text='']").attr("selected",true)
					//获取课程的 隐藏域id   
					var courseId= $("#loadCourse").find("option:selected").attr("id")
					$('#courseId').val(courseId);*/
					//加载第一个课程的题型  这个是级联下一个下拉框
					if (courseId != "") {
						selectCourse();
					}				
		})
	
	
/*选择课程下拉框*/
function selectCourse(){
	var theSelect=document.all.mySelect;
	for(var i=theSelect.options.length-1;i>=0;i--) 
	theSelect.options.remove(i); 
	
	var courseId= $("#courseName").find("option:selected").attr("id")
	$('#courseId').val(courseId);
	
	//通过课程ID 重新请求  题型数据，已达到筛选的目的
	/*题型数据*/
	$.ajax({
		type : 'POST',
		async : false,
		url : ctx + "/getQuestionTypeByCourseId", // '/itoo-exam-questionbankmanage-web/getQuestionTypeByCourseId',//
		data: { "courseId": courseId },
		dataType : 'text',
		success : function(data) {
			var lstQuestionType = eval(data);
			var htmlQuestionType = "";
			if(lstQuestionType.length==0){
				htmlQuestionType+='<option id="">'
				 + '题型为空，请初始化'
				 +'</option><br>';
				clearQuestion();
			}	
			$(lstQuestionType).each(function(i) {
				var mapQuestionType = lstQuestionType[i];
//				 拼写题型下拉框
				 htmlQuestionType +='<option id="'+ mapQuestionType["id"]
				 +'">'
				 + mapQuestionType["questionTypeDesc"]
				 +'</option><br>';
			});
			$("#questionType").append(htmlQuestionType);
		},
		error : function(XMLHttpRequest, textStatus, errorThrown) {
		}
	});
	
	/*//设置题型默认值
	$('#questionType').find("option[id='UbH69brNu3rK687Qwomp6y']").attr("selected",true)
	//设置题型的隐藏域id
	var questionId= $("#questionType").find("option:selected").attr("id")
	$('#questionTypeId').val(questionId);*/
	
	//获取当前选择题型的id和题型数量
	var questionId= $("#questionType").find("option:selected").attr("id")
	$('#questionTypeId').val(questionId);
	var questionCount=$("#questionList > div").size();
	//切换题型，先添加一道试题模版
	if(questionId!=""){			//确保题型可用
		if(questionCount==0){		//确保本页面没有试题
			AddQuestion();
		}
		else{
			selectQuestionType();//如果有试题给出提醒
		}
	}
}

这里只是对于自己在这一块出现的问题做个记录，解决成果做一下总结。给大家提供一个思路。具体详细的请查询相关的API。