本文主要是介绍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)//设置题型的隐藏域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();//如果有试题给出提醒}}
}
这篇关于easyUI 级联下拉框（二）的文章就介绍到这儿，希望我们推荐的文章对编程师们有所帮助！
