日期:2014-05-16  浏览次数:20409 次

JSP页面中用select标签实现级联

    做查询页面,查询条件比较多的时候往往会涉及到级联。举个简单的例子,拿教务系统来说,我们要查询教学计划信息,查询条件是入学批次、学生层次(专升本、高升专)、专业、课程。

      它们之间有什么级联关系呢?入学批次影响学生层次(某个入学批次可能只有专升本或者高升专一个学生层次)、专业、课程,学生层次影响专业、课程,专业又影响课程。也就是说当选择入学批次时,学生层次、专业和课程的下拉框会局部刷新,选择学生层次时,专业和课程的下拉框会局部刷新,选择专业时,课程的下拉框也会局部刷新。

      我们当然不希望已经选择的操作随着页面的刷新又被初始化,再者前面提到选择一项后相关的下拉框是局部刷新。很容易想到用填充页面的方法来实现级联。

      笔者的填充方法是通过提交JS,由Controller获取数据,将数据传到辅助的JSP页面,再用回调函数将辅助JSP页面中的数据填充给相应下拉框。说的抽象,直接上代码了,四级级联稍微麻烦一些,知道原理后也好做,笔者上三级级联的代码。级联样式如下图:

      JSP页面代码:

   <table>
    <tr>
     <td width="400px" align="left">入学批次:<SELECT NAME="grade"
      id="grade" onchange="refreshEduLevelAndSpecialAjax();">  //选择入学批次会刷新层次和专业
       <OPTION VALUE="0">
        --请选择--
        <c:forEach items="${gradeInfo}" var="gradeInfo">
         <OPTION VALUE="${gradeInfo.gradeName}">${gradeInfo.gradeName}         
        </c:forEach>
     </SELECT></td>
     <td width="400px" align="left">统考课程:<SELECT
      NAME="uniExamCourseId" id="uniExamCourseId">
       <OPTION VALUE="0">
        --请选择--
        <c:forEach items="${unifiedExamCourseList}" var="uniExamCourse">
         <OPTION VALUE="${uniExamCourse.id}">${uniExamCourse.uniExamCourseName}     &nb