主页 > 知识库 > JSP页面中如何用select标签实现级联

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

热门标签:阿里云 银行业务 科大讯飞语音识别系统 团购网站 Linux服务器 服务器配置 Mysql连接数设置 电子围栏

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

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

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

笔者的填充方法是通过提交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}        
        /c:forEach>
     /SELECT>/td>
    /tr>
    tr>
     td colspan="2" id="refreshEduLevelAndSpecialAjax">    //设置ID,用于填充层次和专业的下拉框
      table>
       tr>
        td width="400" align="left">层nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;次:SELECT
         NAME="eduLevelId" id="eduLevelId"
         onchange="refreshSpecialAjax();">    //选择层次后刷新专业
          OPTION VALUE="0">--请选择--/OPTION>
          c:forEach items="${educationLevel}" var="educationLevel">
           OPTION VALUE="${educationLevel.id}">${educationLevel.educationLevelName}          
          /c:forEach>
        /SELECT>/td>
        td width="400" align="left" id="refreshSpecialAjax">专nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;业:SELECT            //设置ID,用于填充专业的下拉框
         NAME="specialId" id="specialId">
          OPTION VALUE="0">--请选择--/OPTION>
          c:forEach items="${specialList}" var="special">
           OPTION VALUE="${special.id}">${special.specialName}          
          /c:forEach>
        /SELECT>/td>
       /tr>
      /table>
     /td>
    /tr>
   /table>

JS的代码如下:
复制代码 代码如下:

//JavaScript Document
 var xmlHttp; //用于保存XMLHttpRequest对象的全局变量
 //用于创建XMLHttpRequest对象
 function createXmlHttp() {
  //根据window.XMLHttpRequest对象是否存在使用不同的创建方式
  if (window.XMLHttpRequest) {
   xmlHttp = new XMLHttpRequest(); //FireFox、Opera等浏览器支持的创建方式
  } else {
   xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE浏览器支持的创建方式
  }
 }
 function refreshEduLevelAndSpecialAjax() {
  var grade = document.getElementById("grade").value;
  refreshEduLevelAndSpecial(grade);
 }
 function refreshEduLevelAndSpecial(grade) {
  createXmlHttp(); //创建XMLHttpRequest对象
  xmlHttp.onreadystatechange = refreshEduLevelAndSpecialElement; //设置回调函数
  xmlHttp.open("POST", "eduLevelAndSpecialByGradeNameInSpecialDetail",
    true); //发送POST请求
  xmlHttp.setRequestHeader("Content-type",
    "application/x-www-form-urlencoded");
  xmlHttp.send("grade=" + grade);
 }
 //处理服务器返回的信息 更新层次专业下拉框
 function refreshEduLevelAndSpecialElement() {
  if (xmlHttp.readyState == 4) {
   if (xmlHttp.status == 200) {
    //此处xmlHttp.responseText是请求的*Controller的某个方法返回的渲染页面的源代码
    document.getElementById("refreshEduLevelAndSpecialAjax").innerHTML = xmlHttp.responseText;
   }
  }
 }
 function refreshSpecialAjax() {
  var grade = document.getElementById("grade").value;
  var eduLevelId = document.getElementById("eduLevelId").value;
  refreshSpecial(grade, eduLevelId);
 }
 function refreshSpecial(grade, eduLevelId) {
  createXmlHttp(); //创建XMLHttpRequest对象
  xmlHttp.onreadystatechange = refreshSpecialElement; //设置回调函数
  xmlHttp.open("POST", "specialByGradeNameAndEduLevelIdInSpecialDetail",
    true); //发送POST请求
  xmlHttp.setRequestHeader("Content-type",
    "application/x-www-form-urlencoded");
  xmlHttp.send("grade=" + grade + "eduLevelId=" + eduLevelId);
 }
 //处理服务器返回的信息 更新专业下拉框
 function refreshSpecialElement() {
  if (xmlHttp.readyState == 4) {
   if (xmlHttp.status == 200) {
    //此处xmlHttp.responseText是请求的*Controller的某个方法返回的渲染页面的源代码
    document.getElementById("refreshSpecialAjax").innerHTML = xmlHttp.responseText;
   }
  }
 }

Controller代码:
复制代码 代码如下:

@RequestMapping(value = "/eduLevelAndSpecialByGradeNameInSpecialDetail")
  public ModelAndView getEduLevelAndSpecialByGradeNameInSpecialDetail(HttpServletRequest request,
    HttpServletResponse response) throws JsonParseException, JsonMappingException, JSONException, IOException{  
   String gradeName=request.getParameter("grade");    
   String eduLevelId=request.getParameter("eduLevelId");  
   if(gradeName==null||gradeName.equals("0")){   
    gradeName="null";
   }
   if(eduLevelId==null||eduLevelId.equals("0")){   
    eduLevelId="null";
   }
   ArrayListUtilObject> eduLevelList=uess.getEduLevelIdByGradeNameInSpecialDetail(gradeName);
   ArrayListUtilObject> specialIdList=uess.getSpecialIdByGradeNameAndEduLevelIdInSpecialDetail(gradeName, eduLevelId);  
   mav.addObject("educationLevel", eduLevelList);
   mav.addObject("specialList", specialIdList);
   mav.setViewName("scoreManage/uniExamScore/eduLevelAndSpecialAjax");
   return mav;
  }
  @RequestMapping(value = "/specialByGradeNameAndEduLevelIdInSpecialDetail", method = RequestMethod.POST)
  public ModelAndView getSpecialByGradeNameAndEduLevelIdInSpecialDetail(HttpServletRequest request,
    HttpServletResponse response) throws JsonParseException, JsonMappingException, JSONException, IOException{
   String gradeName=request.getParameter("grade"); 
   String eduLevelId=request.getParameter("eduLevelId");
   System.out.println("grade:"+gradeName+"  eduLevelId:"+eduLevelId);
   if(gradeName==null||gradeName.equals("0")){   
    gradeName="null";
   }
   if(eduLevelId==null||eduLevelId.equals("0")){   
    eduLevelId="null";
   }
   ArrayListUtilObject> specialList=uess.getSpecialIdByGradeNameAndEduLevelIdInSpecialDetail(gradeName, eduLevelId);  
   mav.addObject("specialList", specialList);
   mav.setViewName("scoreManage/uniExamScore/specialAjax");
   return mav;
  }

后台代码没有给出来,但应该看得懂,就是获取后台数据传到eduLevelAndSpecialAjax.jsp和specialAjax.jsp页面。这两个页面用于填充原页面,通过ID来填充相应区域,两个页面代码如下。
eduLevelAndSpecialAjax.jsp辅助页面:
复制代码 代码如下:

td id="refreshEduLevelAndSpecialAjax">    //ID用于填充原页面
    table>
    tr>
     td width="400px" align="left">层nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;次:select
      id="eduLevelId" name="eduLevelId" onchange="refreshSpecialAjax();">
       option value="0">--请选择--/option>
       c:forEach items="${educationLevel}" var="educationLevel">
        option value="${educationLevel.id}">${educationLevel.name}/option>
       /c:forEach>
     /select>/td>
     td width="400px" align="left" id="refreshSpecialAjax">专nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;业:SELECT                               //ID用于填充原页面
      NAME="specialId" id="specialId">
       option value="0">--请选择--/option>
       c:forEach items="${specialList}" var="special">
        OPTION VALUE="${special.id}">${special.name}
       /c:forEach>
     /SELECT>/td>
     /tr>
    /table>
   /td>

specialAjax.jsp辅助页面:
复制代码 代码如下:

td width="400" align="left" id="refreshSpecialAjax">专nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;nbsp;业:SELECT
    NAME="specialId" id="specialId">    //ID用于填充原页面
     option value="0">--请选择--/option>
     c:forEach items="${specialList}" var="special">
      OPTION VALUE="${special.id}">${special.name}
     /c:forEach>
   /SELECT>/td>

这样就在JSP页面实现了填充。

您可能感兴趣的文章:
  • JSP自定义标签Taglib实现过程重点总结
  • jsp struts1 标签实例详解
  • jsp页面中如何将时间戳字符串格式化为时间标签
  • JSP自定义标签rtexprvalue属性用法实例分析
  • jsp自定义标签用法实例详解
  • JSP自定义分页标签TAG全过程
  • JSP中常用的JSTL fmt(format格式化)标签用法整理
  • Jsp自定义标签和方法详解

标签:衡水 枣庄 广元 衢州 江苏 蚌埠 萍乡 大理

巨人网络通讯声明:本文标题《JSP页面中如何用select标签实现级联》,本文关键词  ;如发现本文内容存在版权问题,烦请提供相关信息告之我们,我们将及时沟通与处理。本站内容系统采集于网络,涉及言论、版权与本站无关。
  • 相关文章
  • 收缩
    • 微信客服
    • 微信二维码
    • 电话咨询

    • 400-1100-266