动态加载列表框_onreaddystatechange-CSDN博客

本文链接：https://blog.csdn.net/sskwfnihc/article/details/1823579

<%@ 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" οnchange="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>