java+ajax(三级连动下拉框)
java+ajax(三级连动下拉框)
两个.JSP文件放在同一个目录文件下,启动.
MyJsp10.jsp
<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%
String path = request.getContextPath();
response.setContentType("text/html;charset=gb2312");
request.setCharacterEncoding("gb2312");
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 'MyJsp.jsp' starting page</title>
<script type="text/javascript" language="javascript">
var http_request = false;
var optionValue="";
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 getCity(cityObj){
send_request("sample_10.jsp?flag=city&pid="+cityObj);
}
function getCounty(countyObj){
send_request("sample_10.jsp?flag=county&ciid="+countyObj);
}
/*function commonCopyValue(orignObj, destObj){
if (orignObj.type == "select-one" && destObj.type == "select-one"){
for (var i = 0; i < orignObj.length; i++) {
if (trim(orignObj[i].value) != "") {
destObj.add(new Option(orignObj[i].text, orignObj[i].value));
}
}
}
} */
function setSelectObj(obj){
var arr1=obj.split('@');
var str=arr1[2]+"";
if(arr1[2]=="city\r\n"){
var arr2=arr1[0].split(',');
var arr3=arr1[1].split(',');
var selectCityObj= document.getElementById("city");
//删除原来的
if(selectCityObj.value!=""){
for(var i=0;i<100;i++){
selectCityObj.remove(0);
}
}
//增加新的
for(var i=0;i<arr2.length;i++){
selectCityObj.add(new Option(arr3[i],arr2[i]));
}
}else if(arr1[2]=="county\r\n") {
var arr2=arr1[0].split(',');
var arr3=arr1[1].split(',');
var selectCountyObj= document.getElementById("county");
//删除原来的
if(selectCountyObj.value!=""){
for(var i=0;i<100;i++){
selectCountyObj.remove(0);
}
}
//增加新的
for(var i=0;i<arr2.length;i++){
selectCountyObj.add(new Option(arr3[i],arr2[i]));
}
}
}
</script>
</head>
<body onload="window.status='小波资源'">
<form name="form1" action="" method="post">
请选择省份:<select name="province" id="province" onChange="getCity(this.value)" >
<option value="1">北京</option>
<option value="2">上海</option>
<option value="3">天津</option>
<option value="4">重庆</option>
<option value="5">广东</option>
<option value="6">湖南</option>
<option value="7">湖北</option>
</select>
请选择城市:<select name="city" id="city" onChange="getCounty(this.value)">
<%--<option value="33">株洲</option>
<option value="34">邵阳</option>
<option value="35">湘潭</option> --%>
</select>
请选择区县:<select name="county" id="county">
<%--<option value="21">海淀1</option>
<option value="22">虹桥1</option>
<option value="23">中山2</option>--%>
</select>
</form>
</body>
</html>
sample_10.jsp
<%@ page language="java" import="java.util.*,java.sql.*"
pageEncoding="UTF-8"%>
<%
Connection conn = null;
ResultSet rs = null;
PreparedStatement ps = null;
String ci_id = "";
String ci_name = "";
String co_id = "";
String co_name = "";
String pid = request.getParameter("pid");
String ciid = request.getParameter("ciid");
String flag = request.getParameter("flag");
try {
Class.forName("oracle.jdbc.OracleDriver");
String ur1 = "jdbc:oracle:thin:@localhost:1521:servicesname";
conn = DriverManager.getConnection(ur1, "username", "pwd");
StringBuffer sb = new StringBuffer("");//
StringBuffer sb1 = new StringBuffer("");//
if (pid != null && ("city".equals(flag) || "city" == flag)) {
ps = conn.prepareStatement("select * from city where p_id='"+ pid + "'");
rs = ps.executeQuery();
while (rs.next()) {
ci_id = rs.getString("ci_id");
ci_name = rs.getString("ci_name");
sb.append( ci_id + ",");
sb1.append(ci_name+",");
}
String str1=sb.substring(0,sb.length()-1);
String str2=sb1.substring(0,sb1.length()-1);
out.print(str1+"@"+str2+"@city");
} else if (ciid != null && ("county".equals(flag) || "county" == flag)) {
ps = conn.prepareStatement("select * from county where ci_id='"+ ciid + "'");
rs = ps.executeQuery();
StringBuffer sb2 = new StringBuffer("");//
StringBuffer sb3 = new StringBuffer("");//
while (rs.next()) {
co_id = rs.getString("co_id");
co_name = rs.getString("co_name");
sb2.append(co_id+",");
sb3.append(co_name+",");
}
String str3=sb2.substring(0,sb2.length()-1);
String str4=sb3.substring(0,sb3.length()-1);
out.print(str3+"@"+str4+"@county");
}
} 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();
}
}
%>
.jpg)
