省：<selectid="province"name="province"onchange="jsSubmit()">

<optionvalue="北京"selected="selected">北京</option>

<optionvalue="广东">广东</option>

<optionvalue="海南">海南</option>

</select>

市：<selectid="city"name="city">

<optionvalue="北京">北京</option>

</select>

二、ajax代码创建服务器请求代码不用写了,写onchange时候的事件jsSubmit吧：

functionjsSubmit(){

createXMLHttpRequest();

varprovince=document.getElementById("province");

//解决客户端向服务器端传输中文乱码

varuri="AjaxAction?value="+encodeURI(encodeURI(province.value));

xmlHttp.open("POST",uri,true);

xmlHttp.setRequestHeader("Content-Type","application/x-www-form-urlencoded;")

xmlHttp.onreadystatechange=processResponse;//回调函数啊！

xmlHttp.send(null);

}

三、servlet

publicclassAjaxActionextendsHttpServlet{

privatestaticfinallongserialVersionUID=1L;

privatestaticMap<String,String[]>map=newHashMap<String,String[]>();

static{

String[]cities1={"海口","琼海","三亚"};

String[]cities2={"广州","珠海","佛山","深圳"};

String[]cities3={"北京"};

map.put("北京",cities3);

map.put("广东",cities2);

map.put("海南",cities1);

}

st方法{

Stringprovince=request.getParameter("value");//解决客户端向服务器端传输中文乱码

StringproviceCN=URLDecoder.decode(province,"UTF-8");

String[]cities=map.get(proviceCN);//根据传来的省，查出已经存放进map中对应的市

response.setContentType("text/xml;charset=UTF-8");

StringBufferbuff=newStringBuffer("<citylist>");///准备拼字符串......

for(Stringcity:cities)

{

buff.append("<city>").append(city).append("</city>");

}

buff.append("</citylist>");

response.getWriter().println(buff.toString());

四、ajax的回调函数

functionprocessResponse(){

if(xmlHttp.readyState==4){

if(xmlHttp.status==200){

varcities=xmlHttp.responseXML.getElementsByTagName("city");

vardisplaySelect=document.getElementById("city");

displaySelect.innerHTML=null;

for(vari=0;i<cities.length;i++){

if(i==0){

vara=xmlHttp.responseXML.getElementsByTagName("city")[i].firstChild.data;//用firstChild方法，其他方法我用text方法不管用~不知道怎么回事

varop=newOption(a,a,true,true);

}else{

vara=xmlHttp.responseXML.getElementsByTagName("city")[i].firstChild.data;

varop=newOption(a,a);

alert(a);

}

displaySelect.options[i]=op;

}

}else{

window.alert("请求的页面有异常");

}

}

}

下一篇：纯jsp实现的倒计时动态显示效果完整代码