两级联动的实现

两级联动的实现

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