两级联动的实现

两级联动的实现

          在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即可。

 

 

总结

以上是生活随笔为你收集整理的两级联动的实现的全部内容，希望文章能够帮你解决所遇到的问题。

如果觉得生活随笔网站内容还不错，欢迎将生活随笔推荐给好友。