这一篇简绍级联下拉框:
这是要做的效果:
根据课程加载题型。
简绍实现的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();//如果有试题给出提醒
}
}
}