Ajax achieve two linked the drop-down box
Related Tags:
Structure of the project:
Index.jsp:
<% @ Page language = "java" contentType = "text / html; charset = utf-8"%>
<html>
<head>
<title> My JSP 'index.jsp' starting page </ title>
<meta Http-equiv="Content-Type" content="text/html; charset=utf-8">
<SCRIPT Type="text/javascript">
Var req;
Window.onload = function () (
)
Function Change_Select ()
(
Var zhi = document.getElementById ( 'hero'). Value;
Var url = "select? id =" + escape (zhi);
If (window.XMLHttpRequest)
(
Req = new XMLHttpRequest ();
) Else if (window.ActiveXObject)
(
Req = new ActiveXObject ( "Microsoft.XMLHTTP");
)
If (req)
(
Req.open ( "GET", url, true);
Req.onreadystatechange = callback;
Req.send (null);
)
)
Function callback ()
(
If (req.readyState == 4)
(
If (req.status == 200)
(
ParseMessage ();
Else ()
Alert ( "Not able to retrieve description" + req.statusText);
)
)
)
Function parseMessage ()
(
Var xmlDoc = req.responseXML.documentElement;
Var xSel = xmlDoc.getElementsByTagName ( 'select');
Var select_root = document.getElementById ( 'skill');
Select_root.options.length = 0;
For (var i = 0; i <xSel.length; i + +)
(
Var xValue [i] = xSel. ChildNodes [0]. FirstChild.nodeValue;
Var xText [i] = xSel. ChildNodes [1]. FirstChild.nodeValue;
Var option = new Option (xText, xValue);
Try (
Select_root.add (option);
) Catch (e) (
)
)
)
</ SCRIPT>
</ Head>
<body>
<div Align="center">
<form Name="form1" method="post" action="">
<TABLE Width="70%" boder="0" cellspacing="0">
<TR>
<TD Align="center"> Double Select Box </ TD>
</ TR>
<TR>
<TD>
<SELECT Name="hero" id="hero" onChange="Change_Select()">
<OPTION Value="0"> Unbounded </ OPTION>
<OPTION Value="1"> DK </ OPTION>
<OPTION Value="2"> NEC. </ OPTION>
<OPTION Value="3"> BOSS </ OPTION>
</ SELECT>
<SELECT Name="skill" id="skill">
<OPTION Value="0"> Unbounded </ OPTION>
</ SELECT>
</ TD>
</ TR>
<TR> <td> </ Td> </ TR>
</ TABLE>
</ Form>
</ Div>
</ Body>
</ Html>
SelectServlet.java:
Package com;
Import java.io.IOException;
Import java.io.PrintWriter;
Import javax.servlet.ServletException;
Import javax.servlet.http.HttpServlet;
Import javax.servlet.http.HttpServletRequest;
Import javax.servlet.http.HttpServletResponse;
Public class SelectServlet extends HttpServlet (
/ **
* Constructor of the object.
* /
Public SelectServlet () (
Super ();
)
/ **
* Destruction of the servlet. <br>
* /
Public void destroy () (
Super.destroy () / / Just puts "destroy" string in log
/ / Put your code here
)
/ **
* The doGet method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to get.
*
* @ Param request the request send by the client to the server
* @ Param response the response send by the server to the client
* @ Throws ServletException if an error occurred
* @ Throws IOException if an error occurred
* /
Public void doGet (HttpServletRequest request, HttpServletResponse response)
Throws ServletException, IOException (
Response.setContentType ( "text / xml");
Response.setHeader ( "Cache-Control", "no-cache");
String targetId = request.getParameter ( "id"). ToString ();
String xml_start = "<selects>";
String xml_end = "</ selects>";
String xml = "";
If (targetId.equalsIgnoreCase ( "0")) (
Xml = "<select> <value> 0 </ value> <text> Unbounded </ text> </ select>";
) Else if (targetId.equalsIgnoreCase ( "1")) (
Xml = "<select> <value> 1 </ value> <text> Mana Burn </ text> </ select>";
Xml + = "<select> <value> 2 </ value> <text> Death Coil </ text> </ select>";
Xml + = "<select> <value> 3 </ value> <text> Unholy Aura </ text> </ select>";
Xml + = "<select> <value> 4 </ value> <text> Unholy Fire </ text> </ select>";
) Else if (targetId.equalsIgnoreCase ( "2")) (
Xml = "<select> <value> 1 </ value> <text> Corprxplode </ text> </ select>";
Xml + = "<select> <value> 2 </ value> <text> Raise Dead </ text> </ select>";
Xml + = "<select> <value> 3 </ value> <text> Brilliance Aura </ text> </ select>";
Xml + = "<select> <value> 4 </ value> <text> Aim Aura </ text> </ select>";
Else ()
Xml = "<select> <value> 1 </ value> <text> Rain of Chaos </ text> </ select>";
Xml + = "<select> <value> 2 </ value> <text> Finger of Death </ text> </ select>";
Xml + = "<select> <value> 3 </ value> <text> Bash </ text> </ select>";
Xml + = "<select> <value> 4 </ value> <text> Summon Doom </ text> </ select>";
)
String last_xml = xml_start xml_end + + xml;
Response.getWriter (). Write (last_xml);
)
/ **
* The doPost method of the servlet. <br>
*
* This method is called when a form has its tag value method equals to post.
*
* @ Param request the request send by the client to the server
* @ Param response the response send by the server to the client
* @ Throws ServletException if an error occurred
* @ Throws IOException if an error occurred
* /
Public void doPost (HttpServletRequest request, HttpServletResponse response)
Throws ServletException, IOException (
DoGet (request, response);
)
/ **
* Initialization of the servlet. <br>
*
* @ Throws ServletException if an error occure
* /
Public void init () (throws ServletException
/ / Put your code here
)
)
Web.xml:
<? 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>
- CSS pure imitation classic drop-down menu
- CSS + DIV design examples: production of pure CSS drop-down menu navigation
- The drop-down menu pure CSS [compatible with IE6, IE7, FF]
- CSS pure imitation classic drop-down menu code
- CSS drop-down menu
- Transitional-div xhtml + + + js common css two pages linked to the drop-down menu
- Fireworks MX production of the drop-down menu
- CSS simulation of a drop-down list!
- Fully CSS drop-down menu, only CSS, build pure CSS!
- For a drop-down menu Date
- Editor: pure CSS drop-down menu design expert VIM
- On the use of customized drop-down menu css
- Javascript web design in the drop-down menu
- Css + javascript drop-down menu
- A useful source CSS drop-down menu
- Set attributes the drop-down menu
- Javascript xml achieve a two drop-down menu
- CSS to do with the drop-down menu
- DreamWeaver MX produced by the drop-down menu navigation
- Dreamweaver Destination drop-down menu
On page designer color: color classification (purple)
Purple is used to target women or works of art on the main site, but many big companies prefer to use the site also contains mysterious purple. Darker purple color can be displayed mature feeling, but women usually used in the site are clear (Pale) purple. Differe...
Keyboard induction of Flash animation production methods
Demonstration effects: (on the keyboard space bar can watch the results) <embed
src=http://www.webjx.com/htmldata/2005-08-03/&
quality=high
pluginspage='http://www.macromedia.com/shockwave/download/index.cgi?P1_Prod_Version=ShockwaveFlash'
type='application/x-sho...
Flash MX 2004 produced video tutorial examples: Dreams in space (2)
Article 24: Dreams in space (2) Curriculum objectives: a production of "Dreams of outer space" animated screensavers Curriculum points: The meeting between the animation, Zhou Zheng animation, ActionScript scripting technologies such as the production of...
The simplest example of a call Ajax
/ / New request the creation of a new request Function nr () ( Var xmlreq = false; If (window.XMLHttpRequest) ( Xmlreq = new XMLHttpRequest (); ) Else if (window.ActiveXObject) ( T...
CSS graded in the background as well as to the use of matters
IE browser in which the use of filters can produce many nice effect. Color is graded one of them. The following manner: Filter: progid: DXImageTransform.Microsoft.Gradient (startColorStr = "# ffffff" endColorStr = "# 336699" gradien...