两级联动的实现
在ITOO中有一个需求,就是根据考试的名称,自动的获取该考试所有的考场名称,此时,就用到了两级联动的效果。
这里,使用JavaScript实现。
首先,前台的页面显示使用EasyUI的组件,第一个组件调用的controller中一个类的方法,获取所有的考试名称。
<span style="font-size:24px;"><div style="width: 200px; margin-top: 50px; margin-left: 50px;">
@* 1.加载所有的考试名称 *@
请选择考试名称:
<select id="ExamName" class="easyui-combobox" name="ExamName" style="width: 150px; margin-right: 100px;"
url="/MonitoreRecord/QueryQuestion";
valueField="ExamID" textField="ExamName" required="true" editable="false">
</select>
</div>
<div style="width: 200px; margin-top: -40px; margin-left: 250px;">
@* 2.根据考试名称加载考场名称 *@
请选择考场名称:
<select name="ExamPlace" id="ExamPlace" class="easyui-combobox" style="width: 150px;"
valueField="ExamPlaceID" textField="ExamPlace" required="true" editable="false">
</select>
</div>
</span>
第二个组件,考场的加载是通过js实现的,具体的代码如下:
<span style="font-size:24px;"><script type="text/javascript">
$(function () {
var OrganizationID = "";
$('#ExamName').combobox({
onSelect: function () {
OrganizationID = $('#ExamName').combobox('getValue');
$('#ExamPlace').combobox({
textField: 'ExamPlace',
editable: false,
url: '/InitExam/QueryExamPlaceByExamID?ExamID=' + OrganizationID,
});
}
});
})
</script>
</span>
首先,设置两个组件的id,通过getValue方法获取第一个组件的内容,然后,调用controller的一个类的根据考试ID查询考场的方法,这个方法返回的JSON串。
直接,令第一个组件中的ExamID,等于第二个组件返回JSON串中的ExamID即可。