Index. jsp:
Copy codeThe Code is as follows:
<% @ Page language = "java" pageEncoding = "UTF-8" %>
<Html>
<Head>
<Title> second-level menu linkage demonstration </title>
<Script type = "text/javascript">
Var req;
Window. onload = function ()
{// Function for page loading
}
Function Change_Select () {// This function is called when the option in the first drop-down box changes
Var province = document. getElementById ('province '). value;
Var url = "select? Id = "+ escape (province );
If (window. XMLHttpRequest ){
Req = new XMLHttpRequest ();
} Else if (window. ActiveXObject ){
Req = new ActiveXObject ("Microsoft. XMLHTTP ");
}
If (req ){
Req. open ("GET", url, true );
// Specify the callback function as callback.
Req. onreadystatechange = callback;
Req. send (null );
}
}
// Callback function
Function callback (){
If (req. readyState = 4 ){
If (req. status = 200 ){
ParseMessage (); // parse the XML document
} Else {
Alert ("cannot get description information:" + req. statusText );
}
}
}
// Parse the xml returned Method
Function parseMessage (){
Var xmlDoc = req.responseXML.doc umentElement; // get the returned XML document
Var xSel = xmlDoc. getElementsByTagName ('select ');
// Obtain all the <select> tags in the XML document
Var select_root = document. getElementById ('city ');
// Obtain the second drop-down box on the webpage
Select_root.options.length = 0;
// The length of each two drop-down frames is cleared by 0 each time new data is obtained.
For (var I = 0; I <xSel. length; I ++ ){
Var xValue = xSel [I]. childNodes [0]. firstChild. nodeValue;
// Obtain the value of the first tag in each <select> tag, that is, the value of the <value> tag.
Var xText = xSel [I]. childNodes [1]. firstChild. nodeValue;
// Obtain the value of the second tag in each <select> tag, that is, the value of the <text> tag.
Var option = new Option (xText, xValue );
// Create an option object based on the values marked by each set of values and text.
Try {
Select_root.add (option); // Add the option object to the second drop-down box.
} Catch (e ){
}
}
}
</Script>
</Head>
<Body>
<Div align = "center">
<Form name = "form1" method = "post" action = "">
<Table width = "70%" border = "0" cellspacing = "0" cellpadding = "0">
<Tr>
<Td align = "center">
Second-level linkage example
</Td>
</Tr>
<Tr>
<Td>
<Select name = "province" id = "province" onChange = "Change_Select ()">
<! -- First drop-down menu -->
<Option value = "0">
Select
</Option>
<Option value = "1">
Beijing
</Option>
<Option value = "2">
Tianjin
</Option>
<Option value = "3">
Shandong Province
</Option>
</Select>
<Select name = "city" id = "city">
<! -- The second drop-down menu -->
<Option value = "0">
Select
</Option>
</Select>
</Td>
</Tr>
<Tr>
<Td>
</Td>
<Tr>
</Table>
</Form>
</Div>
</Body>
</Html>
SelectServlet:
Copy codeThe Code is as follows:
Package com;
Import java. io. IOException;
Import javax. servlet. ServletException;
Import javax. servlet. http. HttpServlet;
Import javax. servlet. http. HttpServletRequest;
Import javax. servlet. http. HttpServletResponse;
/***
*
* @ Author zdw
*
*/
Public class SelectServlet extends HttpServlet
{
Private static final long serialVersionUID = 1L;
Public SelectServlet ()
{
Super ();
}
Public void destroy ()
{
Super. destroy ();
}
Public void doGet (HttpServletRequest request, HttpServletResponse response)
Throws ServletException, IOException
{
// Response. setCharacterEncoding ("GBK ");
Response. setContentType ("text/xml ");
Response. setHeader ("Cache-Control", "no-cache ");
Request. setCharacterEncoding ("GBK ");
Response. setCharacterEncoding ("UTF-8 ");
String targetId = request. getParameter ("id"). toString ();
System. out. println (targetId );
// Obtain the value of the parameter id in the request
String xml_start = "<selects> ";
String xml_end = "</selects> ";
String xml = "";
If (targetId. equalsIgnoreCase ("0 "))
{
Xml = "<select> <value> 0 </value> <text> select </text> </select> ";
} Else if (targetId. inclusignorecase ("1 "))
{
Xml = "<select> <value> 1 </value> <text> Changping </text> </select> ";
Xml + = "<select> <value> 2 </value> <text> Fengtai </text> </select> ";
Xml + = "<select> <value> 3 </value> <text> Haidian </text> </select> ";
Xml + = "<select> <value> 4 </value> <text> Chaoyang </text> </select> ";
} Else if (targetId. inclusignorecase ("2 "))
{
Xml = "<select> <value> 1 </value> <text> Tanggu District </text> </select> ";
Xml + = "<select> <value> 2 </value> <text> hangu </text> </select> ";
Xml + = "<select> <value> 3 </value> <text> Dagang district </text> </select> ";
Xml + = "<select> <value> 4 </value> <text> dongli district </text> </select> ";
} Else
{// If it is 3, the following characters are returned
Xml = "<select> <value> 1 </value> <text> Jinan </text> </select> ";
Xml + = "<select> <value> 2 </value> <text> Qingdao </text> </select> ";
Xml + = "<select> <value> 3 </value> <text> Zibo </text> </select> ";
Xml + = "<select> <value> 4 </value> <text> Zaozhuang </text> </select> ";
}
String last_xml = xml_start + xml + xml_end;
Response. getWriter (). write (last_xml );
}
Public void doPost (HttpServletRequest request, HttpServletResponse response)
Throws ServletException, IOException
{
DoGet (request, response );
}
Public void init () throws ServletException
{
}
}
Web. xml:
Copy codeThe Code is as follows:
<? Xml version = "1.0" encoding = "UTF-8"?>
<Web-app version = "2.4" xmlns = "http://java.sun.com/xml/ns/j2ee"
Xmlns: xsi = "http://www.w3.org/2001/XMLSchema-instance"
Xsi: schemaLocation = "http://java.sun.com/xml/ns/j2ee
Http://java.sun.com/xml/ns/j2ee/web-app_2_4.xsd>
<Servlet>
<Servlet-name> SelectServlet </servlet-name>
<Servlet-class> com. SelectServlet </servlet-class>
</Servlet>
<Servlet-mapping>
<Servlet-name> SelectServlet </servlet-name>
<Url-pattern>/select </url-pattern>
</Servlet-mapping>
<Welcome-file-list>
<Welcome-file> index. jsp </welcome-file>
</Welcome-file-list>
</Web-app>
Start building with 50+ products and up to 12 months usage for Elastic Compute Service
1 on 1 presale consultation
24/7 Technical Support 6 Free Tickets per Quarter Faster Response
Alibaba Cloud offers highly flexible support services tailored to meet your exact needs.
A comprehensive suite of global cloud computing services to power your business
Payment Methods We Support
