easyUI 级联下拉框（二）

来源：互联网发布：新视野大学英语软件编辑：程序博客网时间：2024/05/21 09:35

这一篇简绍级联下拉框：

这是要做的效果：

根据课程加载题型。

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

<div id="mustField"><table><tr><th width="40px;">课程</th><th><div class="dropdown" style="“margin-bottom: 15px”"><!-- 下拉列表   可以写事件 --><div><select id="courseName" onchange="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" onchange="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)//设置题型的隐藏域idvar 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。

0 0