java + ajax(三级联动) myself
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String contextPath = request.getContextPath();
if (request.getProtocol().compareTo("HTTP/1.0") == 0) {
response.setHeader("Pragma","no-cache");
} else {
response.setHeader("Cache-Control","no-cache");
}
response.setDateHeader("Expires", 0);
%>
<link rel="stylesheet" type="text/css" href="<%=contextPath%>/common/css/style.css "/>
<link rel="stylesheet" type="text/css" href="<%=contextPath%>/common/css/home.css ">
<style type="text/css">
<!--
.table{border-color:#A4A4A4; background-color:#E6E6E6}
.number{color:#636361;font-weight:bold;font-size:26px; font-family:Arial;}
.select{color:#DA251E;font-weight:bold;font-size:14px; font-family:Arial;}
.fontOne{color:#4B4B4B;font-size:13px; font-family:Arial;padding-bottom:10px}
.style1{padding-bottom:2px}
-->
</style>
<body onload="init()">
<table style="width: 100%" cellpadding="0" cellspacing="0" border="0">
<tr>
<td valign="top" colspan="3">
<img src="<%=contextPath%>/images/support/Support-Image.jpg" width="627px" height="67px" alt=""/></td>
</tr>
<tr>
<td height="20px" colspan="3">
</td>
</tr>
<tr>
<td width="15px"> </td>
<td>
<div style="text-align: center">
<table style="width: 100%; background-color:#f9f9f9">
<tr>
<td height="40px" style="width: 144px" colspan="3"> </td>
</tr>
<tr>
<td align="right" valign="top" class="support_Number" width="150px" style="padding-right:8px">
1</td>
<td width="220">
<div style="text-align: center">
<table style="width: 100%;border-style:solid;border-width:1px;" cellpadding="0" cellspacing="0" class="table">
<tr>
<td>
<table style="width: 100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="height: 12px"> </td>
</tr>
<tr>
<td class="style1"> <font class="support_selectName">Select a Category</font>
</td>
</tr>
<tr>
<td width="150px;" style="padding-left:5px;">
<select id="category" name="category" style="WIDTH: 150px; border:none; font-size:11px;" onchange="getSubCategory(this.value)">
<option value="0" >Please select</option>
<option value = "1" selected="selected">天津</option>
<option value = "2">北京</option>
</select>
</td>
</tr>
<tr>
<td height="29px"> </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
<td>
</td>
</tr>
<tr>
<td height="18px" colspan="3"> </td>
</tr>
<tr>
<td align="right" valign="top" class="support_Number" style="padding-right:8px">
2</td>
<td>
<div style="text-align: center">
<table style="width: 100%;border-style:solid;border-width:1px;" cellpadding="0" cellspacing="0" class="table">
<tr>
<td>
<table style="width: 100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="height: 12px"> </td>
</tr>
<tr>
<td class="style1"> <font class="support_selectName">Select a SubCategory</font>
</td>
</tr>
<tr>
<td width="150px;" style="padding-left:5px;">
<select id="subCategory" name="subCategory" style="WIDTH: 150px; border:none; font-size:11px;" onchange="getProduct(this.value)">
<option value="0" >Please select</option>
</select>
</td>
</tr>
<tr>
<td height="29px"> </td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
<td >
</td>
</tr>
<tr>
<td height="10px" colspan="3"> </td>
</tr>
<tr>
<td align="right" valign="top" class="support_Number" style="padding-right:8px">
3</td>
<td>
<div style="text-align: center; vertical-align:top">
<table style="width: 100%; border-style:solid;border-width:1px;" cellpadding="0" cellspacing="0" class="table">
<tr>
<td>
<table style="width: 100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td height="12px"> </td>
</tr>
<tr>
<td class="style1"> <font class="support_selectName">Select a Category</font>
</td>
</tr>
<tr>
<td >
<select id="product" name="product" style="WIDTH: 150px; HEIGHT: 20px;border:none; font-size:11px;">
<option value="0">Please select</option>
</select>
</td>
</tr>
<tr>
<td height="29px">
</td>
</tr>
</table>
</td>
</tr>
</table>
</div>
</td>
<td>
<div style="text-align: center">
<table style="width: 100%">
<tr>
<td width="5px"> </td>
<td style="width: 180px" class="support_submitText">
To better assist your search,<br />
please select the product,<br />
model and category.</td>
</tr>
<tr>
<td width="5px"> </td>
<td width="20%" style="width: 180px"><img id="buttonfiletype" SRC="<%=contextPath%>/images/support/SubmitRequest.jpg" WIDTH="107" HEIGHT="26" onmouseover="buttonMouseOver('buttonfiletype')" onclick="RefreshPageThree()"></td>
</tr>
</table>
</div>
</td>
</tr>
<tr>
<td height="30px"> </td>
</tr>
</table>
</div>
</td>
<td width="15px"> </td>
</tr>
<tr>
<td height="15px" colspan="3"> </td>
</tr>
</table>
</body>
<script type="text/javascript" language="javascript">
var http_request = false;
var optionValue="";
function init() {
var categoryId = "1";
getSubCategory(categoryId);
}
function send_request(url) {//初始化,指定处理函数,发送请求的函数
http_request = false;
if (window.XMLHttpRequest) { // Mozilla浏览器
http_request = new XMLHttpRequest();
if (http_request.overrideMimeType) {
http_request.overrideMimeType('text/xml');//设置MIME类别
}
} else if (window.ActiveXObject) { // IE 浏览器
try {
http_request = new ActiveXObject("Msxml2.XMLHTTP");
http_request.overrideMimeType('text/xml');//设置MIME类别
} catch (e) {
try {
http_request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e) {}
}
}
if (!http_request) {//异常,创建对象实例失败
alert('Giving up :( 创建对象实例失败');
return false;
}
http_request.onreadystatechange = processRequest;
http_request.open('post', url, true);
http_request.send(null);
}
function processRequest() {
if (http_request.readyState == 4) {
if (http_request.status == 200) {
optionValue = http_request.responseText + "";
setSelectObj(optionValue);
} else {
alert('你所请求的页面有问题');
}
}
}
function showRoles(obj) {
document.getElementById(obj).parentNode.style.display = "";
document.getElementById(obj).innerHTML = "正在读取数据........";
testPos=obj;
send_request('sample_10.jsp');
}
function getSubCategory(subCategoryObj) {
send_request("getDropDownList.jsp?flag=subCategory&categoryid="+subCategoryObj);
}
function getProduct(productObj) {
send_request("getDropDownList.jsp?flag=product&subid="+productObj);
}
function setSelectObj(obj) {
var arr1 = new Array();
var arr2 = new Array();
var arr3= new Array();
var str = "";
var selectsubCategoryObj = document.getElementById("subCategory");
var selectproductObj = document.getElementById("product");
var selectCategoryObj = document.getElementById("category");
if (trimString(obj) != "") {
arr1 = obj.split('@');
str = arr1[2]+"";
if (arr1[2] == "subCategory\r\n") {
arr2 = arr1[0].split(',');
arr3 = arr1[1].split(',');
//删除原来的
if (selectsubCategoryObj.value != "") {
for (var i = 0; i < 100; i++) {
selectsubCategoryObj.remove(0);
}
}
//增加新的
selectsubCategoryObj.add(new Option("Please select", "0"));
for (var i = 0; i < arr2.length; i++) {
selectsubCategoryObj.add(new Option(trimString(arr3[i]), trimString(arr2[i])));
}
} else if (arr1[2] == "product\r\n") {
arr2 = arr1[0].split(',');
arr3 = arr1[1].split(',');
//删除原来的
if (selectproductObj.value != "") {
for (var i = 0; i < 100; i++) {
selectproductObj.remove(0);
}
}
//增加新的
selectproductObj.add(new Option("Please select", "0"));
for(var i = 0; i < arr2.length; i++) {
selectproductObj.add(new Option(trimString(arr3[i]), trimString(arr2[i])));
}
}
} else {
if (selectCategoryObj.value == "0" || (selectCategoryObj.value != "0" && trimString(obj) == "")) {
//删除原来的
if (selectsubCategoryObj.value != "") {
for (var i = 0; i < 100; i++) {
selectsubCategoryObj.remove(0);
}
}
//增加默认项
selectsubCategoryObj.add(new Option("Please select", "0"));
}
if ((selectCategoryObj.value != "0" && selectsubCategoryObj.value == "0") ||
(selectCategoryObj.value == "0" && selectsubCategoryObj.value == "0")) {
//删除原来的
if (selectproductObj.value != "") {
for (var i = 0; i < 100; i++) {
selectproductObj.remove(0);
}
}
//增加默认项
selectproductObj.add(new Option("Please select", "0"));
}
}
}
function trimString(sStr) {
//by xmzh
if (sStr == null) return "";
return sStr.replace(/(^\s*)|(\s*$)/ig,"");
}
</script>
getDropDownList.jsp
<%@ page language="java" import="java.util.*,java.sql.*"
pageEncoding="UTF-8"%>
<%
Connection conn = null;
ResultSet rs = null;
PreparedStatement ps = null;
String sub_id = "";
String sub_name = "";
String p_id = "";
String p_name = "";
String categoryid = request.getParameter("categoryid");
String subid = request.getParameter("subid");
String flag = request.getParameter("flag");
String str1= "";
String str2= "";
StringBuffer sb = new StringBuffer("");
StringBuffer sb1 = new StringBuffer("");
StringBuffer sb2 = new StringBuffer("");
StringBuffer sb3 = new StringBuffer("");
try {
String drivername="com.microsoft.jdbc.sqlserver.SQLServerDriver";
String url="jdbc:microsoft:sqlserver://localhost:1433;DatabaseName=webportalTest";
try {
Class.forName(drivername);
conn=DriverManager.getConnection(url,"sa","206073");
}catch(SQLException e){
System.out.println(e.getMessage());
}
if (categoryid != null && ("subCategory".equals(flag) || "subCategory" == flag)) {
ps = conn.prepareStatement("select * from T_SubCategory where categoryId='"+ categoryid + "'");
rs = ps.executeQuery();
while (rs.next()) {
sub_id = rs.getString("id");
sub_name = rs.getString("name");
sb.append( sub_id + ",");
sb1.append(sub_name+",");
}
if (!sb.toString().equals("") && !sb1.toString().equals("")) {
str1= sb.substring(0,sb.length()-1);
str2= sb1.substring(0,sb1.length()-1);
out.print(str1+"@"+str2+"@subCategory");
}
} else if (subid != null && ("product".equals(flag) || "product" == flag)) {
ps = conn.prepareStatement("select * from T_Product where subCategoryId='"+ subid + "'");
rs = ps.executeQuery();
while (rs.next()) {
p_id = rs.getString("id");
p_name = rs.getString("name");
sb2.append(p_id + ",");
sb3.append(p_name + ",");
}
if (!sb2.toString().equals("") && !sb3.toString().equals("")) {
String str3 = sb2.substring(0,sb2.length()-1);
String str4 = sb3.substring(0,sb3.length()-1);
out.print(str3 + "@" + str4 + "@product");
}
}
} catch (Exception ex) {
ex.printStackTrace();
out.println("异常:" + ex.getMessage());
} finally {
try {
rs.close();
ps.close();
if (conn != null) {
conn.close();
}
} catch (Exception e) {
rs = null;
ps = null;
conn = null;
e.printStackTrace();
}
}
%>
![](http://www.cnblogs.com/images/cnblogs_com/nanshouyong326/90398/o_20080126(020).jpg)