How can I implement cascade using the select tag on a JSP page?

When querying pages with many query conditions, cascade is often involved. For example, in the educational administration system, we want to query the teaching plan information, including admission batches, student levels (undergraduate and advanced), majors, and courses.

What is the cascade relationship between them?The number of admission batches affects the student level (a certain admission batch may only have an undergraduate or higher than a specific student level), major, and course. The student level affects the major and course level, while the major also affects the course level. That is to say, when the admission batch is selected, the student level, major, and course drop-down lists will be refreshed. When the student level is selected, the drop-down boxes of the major and course will be refreshed, the course drop-down box is also refreshed.

Of course, we do not want the selected operations to be initialized with page refresh. In addition, the related drop-down box after selecting one item is a partial refresh. It is easy to use the page filling method to achieve cascade.

The filling method of the author is to submit JS, get data from the Controller, upload the data to the auxiliary JSP page, and then fill the data in the auxiliary JSP page with the callback function to the corresponding drop-down box. The abstract is directly written into the code. Level-4 cascade is a little troublesome. After knowing the principle, I can do it well. The code of the level-3 cascade is used by the author.Cascade styles such:

 JSP page code:
Copy codeThe Code is as follows:
<Table>
<Tr>
<Td width = "400px" align = "left"> admission batch: <select name = "grade"
Id = "grade" onchange = "refreshEduLevelAndSpecialAjax ();"> // select the admission batch to refresh the level and major
<Option value = "0">
-- Select --
<C: forEach items = "$ {gradeInfo}" var = "gradeInfo">
<Option value = "$ {gradeInfo. gradeName}" >$ {gradeInfo. gradeName}
</C: forEach>
</SELECT> </td>
<Td width = "400px" align = "left"> General Course: <SELECT
NAME = "uniExamCourseId" id = "uniExamCourseId">
<Option value = "0">
-- Select --
<C: forEach items = "$ {uniiedexamcourselist}" var = "uniExamCourse">
<Option value = "$ {uniExamCourse. id}" >$ {uniExamCourse. uniExamCourseName}
</C: forEach>
</SELECT> </td>
</Tr>
<Tr>
<Td colspan = "2" id = "refreshEduLevelAndSpecialAjax"> // set the ID to fill in the hierarchy and professional drop-down boxes
<Table>
<Tr>
<Td width = "400" align = "left"> layer times: <SELECT
NAME = "eduLevelId" id = "eduLevelId"
Onchange = "refreshSpecialAjax ();"> // refresh the major after selecting a level
<Option value = "0"> -- select -- </OPTION>
<C: forEach items = "$ {educationLevel}" var = "educationLevel">
<Option value = "$ {educationLevel. id}" >$ {educationLevel. educationLevelName}
</C: forEach>
</SELECT> </td>
<Td width = "400" align = "left" id = "refreshSpecialAjax"> professional: <SELECT // set the ID to fill in the professional drop-down box
NAME = "specialId" id = "specialId">
<Option value = "0"> -- select -- </OPTION>
<C: forEach items = "$ {specialList}" var = "special">
<Option value = "$ {special. id}" >$ {special. specialName}
</C: forEach>
</SELECT> </td>
</Tr>
</Table>
</Td>
</Tr>
</Table>

The JS Code is as follows:
Copy codeThe Code is as follows:
// JavaScript Document
Var xmlHttp; // global variable used to save the XMLHttpRequest object
// Create an XMLHttpRequest object
Function createXmlHttp (){
// Use different creation methods based on whether the window. XMLHttpRequest object exists
If (window. XMLHttpRequest ){
XmlHttp = new XMLHttpRequest (); // creation method supported by FireFox, Opera, and other browsers
} Else {
XmlHttp = new ActiveXObject ("Microsoft. XMLHTTP"); // creation method supported by IE
}
}
Function refreshEduLevelAndSpecialAjax (){
Var grade = document. getElementById ("grade"). value;
RefreshEduLevelAndSpecial (grade );
}
Function refreshEduLevelAndSpecial (grade ){
CreateXmlHttp (); // create an XMLHttpRequest object
XmlHttp. onreadystatechange = refreshEduLevelAndSpecialElement; // sets the callback function.
XmlHttp. open ("POST", "eduLevelAndSpecialByGradeNameInSpecialDetail ",
True); // send a POST request
XmlHttp. setRequestHeader ("Content-type ",
"Application/x-www-form-urlencoded ");
XmlHttp. send ("grade =" + grade );
}
// The update level professional drop-down box for processing the information returned by the server
Function refreshEduLevelAndSpecialElement (){
If (xmlHttp. readyState = 4 ){
If (xmlHttp. status = 200 ){
// XmlHttp. responseText is the source code of the rendering page returned by a method of * Controller in the request.
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 (); // create an XMLHttpRequest object
XmlHttp. onreadystatechange = refreshSpecialElement; // sets the callback function.
XmlHttp. open ("POST", "specialByGradeNameAndEduLevelIdInSpecialDetail ",
True); // send a POST request
XmlHttp. setRequestHeader ("Content-type ",
"Application/x-www-form-urlencoded ");
XmlHttp. send ("grade =" + grade + "& eduLevelId =" + eduLevelId );
}
// Process the information returned by the server. Update the professional drop-down list
Function refreshSpecialElement (){
If (xmlHttp. readyState = 4 ){
If (xmlHttp. status = 200 ){
// XmlHttp. responseText is the source code of the rendering page returned by a method of * Controller in the request.
Document. getElementById ("refreshSpecialAjax"). innerHTML = xmlHttp. responseText;
}
}
}

Controller code:
Copy codeThe Code is as follows:
@ 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;
}

The background code is not provided, but it should be understood that the background data is obtained and uploaded to the eduLevelAndSpecialAjax. jsp and specialAjax. jsp pages. The two pages are used to fill the original page and fill the corresponding area with the ID. The code for the two pages is as follows.
EduLevelAndSpecialAjax. jsp auxiliary page:
Copy codeThe Code is as follows:
<Td id = "refreshEduLevelAndSpecialAjax"> // ID is used to fill the original page
<Table>
<Tr>
<Td width = "400px" align = "left"> layer times: <select
Id = "eduLevelId" name = "eduLevelId" onchange = "refreshSpecialAjax ();">
<Option value = "0"> -- select -- </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"> professional: <SELECT // ID is used to fill the original page
NAME = "specialId" id = "specialId">
<Option value = "0"> -- select -- </option>
<C: forEach items = "$ {specialList}" var = "special">
<Option value = "$ {special. id}" >$ {special. name}
</C: forEach>
</SELECT> </td>
</Tr>
</Table>
</Td>

SpecialAjax. jsp auxiliary page:
Copy codeThe Code is as follows:
<Td width = "400" align = "left" id = "refreshSpecialAjax"> professional: <SELECT
NAME = "specialId" id = "specialId"> // ID is used to fill the original page
<Option value = "0"> -- select -- </option>
<C: forEach items = "$ {specialList}" var = "special">
<Option value = "$ {special. id}" >$ {special. name}
</C: forEach>
</SELECT> </td>

In this way, the padding is implemented on the JSP page.