前台:---------------------------------------------------------------------------------------
<%@ page contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<html>
<head>
<script type="text/javascript" src="js/prototype-1.6.0.3.js"></script>
<script type="text/javascript">
function getXmlHttpRequest(){
var xhr = null;
if((typeof XMLHttpRequest)!='undefined'){
xhr = new XMLHttpRequest();
}else {
xhr = new ActiveXObject('Microsoft.XMLHttp');
}
return xhr;
}
function change(v1){
var xhr = getXmlHttpRequest();
xhr.open('post','city.do',true);
xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
xhr.onreadystatechange=function(){
//服务器返回 yy,岳阳;cs,长沙;hh,怀化
if(xhr.readyState == 4){
var txt = xhr.responseText;
var arr = txt.split(';');
$('s2').innerHTML = '';
for(i=0;i<arr.length;i++){
var arr1 = arr[i];
var arr2 = arr1.split(',');
var op = new Option(arr2[1],arr2[0]);
$('s2').options[i] = op;
}
}
};
xhr.send('name=' + v1);
}
</script>
</head>
<body style="font-size:30px;">
<select id="s1" style="width:120px;" onchange="change(this.value);">
<option value="hn">湖南</option>
<option value="bj">北京</option>
</select>
<select id="s2" style="width:120px;"> </select>
</body>
</html>
后端:------------------------------------------------------------------------------------------------------------------
public class ActionServlet extends HttpServlet {
public void service(HttpServletRequest request,HttpServletResponse response)throws ServletException, IOException {
String uri = request.getRequestURI();
String path = uri.substring(uri.lastIndexOf("/"),uri.lastIndexOf("."));
response.setContentType("text/html;charset=utf-8");
PrintWriter out = response.getWriter();
if(path.equals("/city")){
String name = request.getParameter("name");
if(name.equals("hn")){
out.println("yy,岳阳;hh,怀化;cs,长沙"); -----手工组装下拉项数据格式
}else if(name.equals("bj")){
out.println("cy,朝阳;hd,海淀;dc,东城;xc,西城");-----手工组装下拉项数据格式
}
}
out.close();
}
}