Ajax二级联动下拉框

页面:index.html

<%@ page language="java" contentType="text/html; charset=utf-8"%>
<html>
<head>
<title>My JSP 'index.html' starting page</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<SCRIPT type="text/javascript">
var req;
window.οnlοad=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=xSel[i].childNodes[0].firstChild.nodeValue;
var xText=xSel[i].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">D.K.</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+xml_end;
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
}

}


Java软件工程师推荐书籍:
[url=http://s.click.taobao.com/t_1?i=qX6heR6BFiSTjQ%3D%3D&p=mm_12504564_0_0&n=11]开发者突击:Struts 2核心技术与Java EE框架整合开发实战[/url]
[url=http://s.click.taobao.com/t_1?i=qvQpL6SZGYGlrA%3D%3D&p=mm_12504564_0_0&n=11]轻量级Java EE企业应用实战——Struts 2+Spring+Hibernate[/url]
[url=http://s.click.taobao.com/t_1?i=qvQpL6vYNMZXEg%3D%3D&p=mm_12504564_0_0&n=11]JAVA核心技术卷II:高级特性[/url]
[url=http://s.click.taobao.com/t_1?i=qv8XTF3qhryssA%3D%3D&p=mm_12504564_0_0&n=11]全新正版《Java程序设计应用基础教程》石号仓[/url]
[url=http://s.click.taobao.com/t_1?i=qvQuvsHw%2FBysSg%3D%3D&p=mm_12504564_0_0&n=11]Java编程思想(第4版)[/url]

[url=http://www.wegoto.cn]网购通[/url]
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值