easyUI 级联下拉框(二)

这一篇简绍级联下拉框:

这是要做的效果:


根据课程加载题型。


简绍实现的HTMl,使用的是拼接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> 

下面是实现的相关的JS:

/*窗体加载页面,初始化题型数据*/
		$(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。

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值