基本思路：前台的下拉框值改变时，AJAX将值传入后台的servlet进行处理，根据不同的值返回不同的JSON数据，然后前台进行解析成字符数组，添加到option中.
index.jsp
<%@ page language="java" import="java.util.*" pageEncoding="utf-8"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme() + "://"
+ request.getServerName() + ":" + request.getServerPort()
+ path + "/";
%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<base href="<%=basePath%>">
<title>My JSP 'index.jsp' starting page</title>
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta http-equiv="expires" content="0">
<meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
<meta http-equiv="description" content="This is my page">
<!--
<link rel="stylesheet" type="text/css" href="styles.css">
-->
<script type="text/javascript">
var xmlHttpRequest;
function createXmlHttpRequest() {
if (window.XMLHttpRequest) {
xmlHttpRequest = new XMLHttpRequest();
} else {
xmlHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
}
function getCity(value) {
createXmlHttpRequest();
xmlHttpRequest.open("POST", "cityAction?value="+value,true); //将value传递到后台的servlet
xmlHttpRequest.onreadystatechange = showMsgCallback;
xmlHttpRequest.send(null);
}
function showMsgCallback() {
if (xmlHttpRequest.readyState == 4) {
if (xmlHttpRequest.status == 200) {
var str = eval("("+xmlHttpRequest.responseText+")"); //JSON格式转换为字符数组
if(str!=null&&str!=""){
document.getElementById("city").options.length=0; //将原有的选项清空
document.getElementById("city").options.add(new Option("--选择"));
for(var i=0;i<str.length;i++){ //遍历数组
var option = document.createElement("option"); //创建一个 option
option.text = str[i]; //设置显示的值
option.value = str[i]; //设置value属性值
document.getElementById("city").options.add(option); //将新建的option添加到select中
}
}else{
document.getElementById("city").options.length=0;
document.getElementById("city").options.add(new Option("--选择"));
}
}
}
}
</script>
</head>
<body>
省:
<select onchange="getCity(this.value)">
<option>
--选择
</option>
<option value="北京">
北京
</option>
<option value="深圳">
深圳
</option>
<option value="河南">
河南
</option>
</select>
城市:
<select id="city">
<option>
--选择
</option>
</select>
</body>
</html>
Servlet: CityAction.java
package com.org;
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 CityAction extends HttpServlet {
public void doGet(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
response.setContentType("text/html;charset=utf-8");
request.setCharacterEncoding("utf-8");
PrintWriter out = response.getWriter();
String province = request.getParameter("value");
StringBuffer buf = new StringBuffer("[");
//数据只是测试 通常是从数据库中取出数据
if("北京".equals(province)){
buf.append("/"").append("海淀").append("/"").append(",");
buf.append("/"").append("朝阳").append("/"").append(",");
buf.append("/"").append("昌平").append("/"").append(",");
buf.append("/"").append("大兴").append("/"");
buf.append("]");
out.print(buf);
System.out.println(buf);
}else if("深圳".equals(province)){
buf.append("/"").append("福田").append("/"").append(",");
buf.append("/"").append("罗湖").append("/"").append(",");
buf.append("/"").append("南山").append("/"").append(",");
buf.append("/"").append("盐田").append("/"");
buf.append("]");
out.print(buf);
System.out.println(buf);
}else if("河南".equals(province)){
buf.append("/"").append("郑州").append("/"").append(",");
buf.append("/"").append("新乡").append("/"").append(",");
buf.append("/"").append("洛阳").append("/"").append(",");
buf.append("/"").append("商丘").append("/"");
buf.append("]");
out.print(buf);
System.out.println(buf);
}else{
out.print("[/"/"]");
}
System.out.println(province+"******");
out.flush();
out.close();
}
public void doPost(HttpServletRequest request, HttpServletResponse response)
throws ServletException, IOException {
this.doGet(request, response);
}
}
原创文章，作者：ItWorker，如若转载，请注明出处：https://blog.ytso.com/14499.html