在线a亚洲视频播放在线观看,久久成人亚洲香蕉草草,日韩一级淫片

做查詢頁面，查詢條件比較多的時候往往會涉及到級聯(lián)。舉個簡單的例子，拿教務(wù)系統(tǒng)來說，我們要查詢教學(xué)計劃信息，查詢條件是入學(xué)批次、學(xué)生層次（專升本、高升專）、專業(yè)、課程。

它們之間有什么級聯(lián)關(guān)系呢？入學(xué)批次影響學(xué)生層次（某個入學(xué)批次可能只有專升本或者高升專一個學(xué)生層次）、專業(yè)、課程，學(xué)生層次影響專業(yè)、課程，專業(yè)又影響課程。也就是說當(dāng)選擇入學(xué)批次時，學(xué)生層次、專業(yè)和課程的下拉框會局部刷新，選擇學(xué)生層次時，專業(yè)和課程的下拉框會局部刷新，選擇專業(yè)時，課程的下拉框也會局部刷新。

我們當(dāng)然不希望已經(jīng)選擇的操作隨著頁面的刷新又被初始化，再者前面提到選擇一項后相關(guān)的下拉框是局部刷新。很容易想到用填充頁面的方法來實現(xiàn)級聯(lián)。

筆者的填充方法是通過提交JS，由Controller獲取數(shù)據(jù)，將數(shù)據(jù)傳到輔助的JSP頁面，再用回調(diào)函數(shù)將輔助JSP頁面中的數(shù)據(jù)填充給相應(yīng)下拉框。說的抽象，直接上代碼了，四級級聯(lián)稍微麻煩一些，知道原理后也好做，筆者上三級級聯(lián)的代碼。級聯(lián)樣式如下圖：

JSP頁面代碼：
復(fù)制代碼代碼如下:
   <table>
    <tr>
     <td width="400px" align="left">入學(xué)批次：<SELECT NAME="grade"
      id="grade" onchange="refreshEduLevelAndSpecialAjax();"> //選擇入學(xué)批次會刷新層次和專業(yè)
       <OPTION VALUE="0">
        --請選擇--
        <c:forEach items="${gradeInfo}" var="gradeInfo">
         <OPTION VALUE="${gradeInfo.gradeName}">${gradeInfo.gradeName}
        </c:forEach>
     </SELECT></td>
     <td width="400px" align="left">統(tǒng)考課程：<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">    //設(shè)置ID，用于填充層次和專業(yè)的下拉框
      <table>
       <tr>
        <td width="400" align="left">層       次：<SELECT
         NAME="eduLevelId" id="eduLevelId"
         onchange="refreshSpecialAjax();">    //選擇層次后刷新專業(yè)
          <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">專        業(yè)：<SELECT            //設(shè)置ID，用于填充專業(yè)的下拉框
         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的代碼如下：
復(fù)制代碼代碼如下:
//JavaScript Document
var xmlHttp; //用于保存XMLHttpRequest對象的全局變量
//用于創(chuàng)建XMLHttpRequest對象
function createXmlHttp() {
//根據(jù)window.XMLHttpRequest對象是否存在使用不同的創(chuàng)建方式
if (window.XMLHttpRequest) {
   xmlHttp = new XMLHttpRequest(); //FireFox、Opera等瀏覽器支持的創(chuàng)建方式
} else {
   xmlHttp = new ActiveXObject("Microsoft.XMLHTTP");//IE瀏覽器支持的創(chuàng)建方式
}
}
function refreshEduLevelAndSpecialAjax() {
var grade = document.getElementById("grade").value;
refreshEduLevelAndSpecial(grade);
}
function refreshEduLevelAndSpecial(grade) {
createXmlHttp(); //創(chuàng)建XMLHttpRequest對象
xmlHttp.onreadystatechange = refreshEduLevelAndSpecialElement; //設(shè)置回調(diào)函數(shù)
xmlHttp.open("POST", "eduLevelAndSpecialByGradeNameInSpecialDetail",
    true); //發(fā)送POST請求
xmlHttp.setRequestHeader("Content-type",
    "application/x-www-form-urlencoded");
xmlHttp.send("grade=" + grade);
}
//處理服務(wù)器返回的信息更新層次專業(yè)下拉框
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(); //創(chuàng)建XMLHttpRequest對象
xmlHttp.onreadystatechange = refreshSpecialElement; //設(shè)置回調(diào)函數(shù)
xmlHttp.open("POST", "specialByGradeNameAndEduLevelIdInSpecialDetail",
    true); //發(fā)送POST請求
xmlHttp.setRequestHeader("Content-type",
    "application/x-www-form-urlencoded");
xmlHttp.send("grade=" + grade + "&eduLevelId=" + eduLevelId);
}
//處理服務(wù)器返回的信息更新專業(yè)下拉框
function refreshSpecialElement() {
if (xmlHttp.readyState == 4) {
   if (xmlHttp.status == 200) {
    //此處xmlHttp.responseText是請求的*Controller的某個方法返回的渲染頁面的源代碼
    document.getElementById("refreshSpecialAjax").innerHTML = xmlHttp.responseText;
   }
}
}

Controller代碼：
復(fù)制代碼代碼如下:
@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";
   }
   ArrayList<UtilObject> eduLevelList=uess.getEduLevelIdByGradeNameInSpecialDetail(gradeName);
   ArrayList<UtilObject> 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";
   }
   ArrayList<UtilObject> specialList=uess.getSpecialIdByGradeNameAndEduLevelIdInSpecialDetail(gradeName, eduLevelId);
   mav.addObject("specialList", specialList);
   mav.setViewName("scoreManage/uniExamScore/specialAjax");
   return mav;
}

后臺代碼沒有給出來，但應(yīng)該看得懂，就是獲取后臺數(shù)據(jù)傳到eduLevelAndSpecialAjax.jsp和specialAjax.jsp頁面。這兩個頁面用于填充原頁面，通過ID來填充相應(yīng)區(qū)域，兩個頁面代碼如下。
eduLevelAndSpecialAjax.jsp輔助頁面：
復(fù)制代碼代碼如下:
<td id="refreshEduLevelAndSpecialAjax">    //ID用于填充原頁面
    <table>
    <tr>
     <td width="400px" align="left">層       次：<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">專        業(yè)：<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輔助頁面：
復(fù)制代碼代碼如下:
<td width="400" align="left" id="refreshSpecialAjax">專        業(yè)：<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頁面實現(xiàn)了填充。

jsp技術(shù)：JSP頁面中如何用select標(biāo)簽實現(xiàn)級聯(lián)，轉(zhuǎn)載需保留來源！

鄭重聲明：本文版權(quán)歸原作者所有，轉(zhuǎn)載文章僅為傳播更多信息之目的，如作者信息標(biāo)記有誤，請第一時間聯(lián)系我們修改或刪除，多謝。

一区二区久久-一区二区三区www-一区二区三区久久-一区二区三区久久精品-麻豆国产一区二区在线观看-麻豆国产视频

JSP頁面中如何用select標(biāo)簽實現(xiàn)級聯(lián)

相關(guān)文章閱讀