<%@ page language="java" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>動態加載列表框</title>
</head>
<script type="text/javascript">
var xmlHttp ;
function createXMLHttpRequest() {
if(window.ActiveXObject) {
xmlHttp = new ActiveXObject("Microsoft.XMLHTTP") ;
}else if(window.XMLHttpRequest) {
xmlHttp = new XMLHttpRequest() ;
}
}
function select_change() {
var depart = document.getElementById("depart").value ;
if(depart != null) {
createXMLHttpRequest() ;
var url = "dylist.jsp?depart="+depart ;
xmlHttp.open("GET",url,true) ;
xmlHttp.onreaddystatechange = showMembers ;
xmlHttp.send(null) ;
}
}
function showMembers() {
if(xmlHttp.readyState ==4) {
if(xmlHttp.status = 200) {
var membersData = xmlHttp.responseXML.getElementByTagName("member") ;
var membersSelect = document.getElementById("member") ;
var option = null ;
memberSelect.options.length = 0 ;
//循環將數據插入列表框中
for(var i=0 ;i<memberData.length;i++) {
try {
membersSelect.appendChild(option) ;
}catch(e) {
alert(e) ;
}
}
}else {
alert("您請求的頁面有異常發生");
}
}else {
//信息還沒有返回,等待
}
}
</script>
<body>
部分<br>
<select id="depart" onchange="select_change()">
<option value="null">選擇</option>
<option value="d1">部門一</option>
<option value="d2">部門二</option>
<option value="d3">部門三</option>
<option value="d4">部門四</option>
</select>
<select id="member" multiple="multiple">
</select>
</body>
</html>
dylist.jsp
<%@ page language="java" import="java.util.*" contentType="text/html; charset=UTF-8"%>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<title>動態加載列表框</title>
</head>
<body>
<%
String depart = request.getParameter("depart") ;
if(depart == null) depart = "d1" ;
StringBuffer sb = new StringBuffer() ;
sb.append("<members>") ;
Map map = new HashMap() ;
String d1 = "<member><id>1001</id><name>成員一</name></member><member><id>1002</id><name>成員二</name></member>" ;
String d2 = "<member><id>1003</id><name>成員三</name></member><member><id>1004</id><name>成員四</name></member>" ;
String d3 = "<member><id>1005</id><name>成員五</name></member><member><id>1006</id><name>成員六</name></member>" ;
String d4 = "<member><id>1007</id><name>成員七</name></member><member><id>1008</id><name>成員八</name></member>" ;
map.put("d1",d1) ;
map.put("d2",d2) ;
map.put("d3",d3) ;
map.put("d4",d4) ;
sb.append(map.get(depart.toString())) ;
sb.append("</members>") ;
response.setContentType("text/xml") ;
out.write(sb.toString()) ;
%>
</body>
</html>
posted on 2007-10-13 21:44
Ke 閱讀(573)
評論(0) 編輯 收藏 所屬分類:
ajax