<!-- 导入jquey库文件 -->
<script type="text/javascript" src="js/jquery-1.3.1.js"></script>
<script type="text/javascript">
//使用Ajax结合Jquery+后台Json 实现联动菜单
//使用Jquery进行Ajax代码的简化
function showCity(province){
//4个参数类型分别为:提交路径,传递的参数,回调函数,返回数据类型
$.post("<%=basePath%>pages/user!showCity.action",{"user.province":province},showCityCallback,"json");
}
//回调函数,Jquery会自动将结果转换为对象,并传递到回调函数中。
function showCityCallback(obj){
//按Id查询页面元素
var city=$("#city");
//设置属性,每次改变时清空在显示
city.attr("length",1);
for(var i=0;i<obj.allCity.length;i++){
var cid=obj.allCity[i].cid;
var cname=obj.allCity[i].cname;
//添加子节点
var option="<option value='"+cid+"'>"+cname+"</option>";
city.append(option);
}
}
</script>
<select id="province" name="user.province" οnchange="showCity(this.value);">
<option value="0">-请选择省份-</option>
<c:if test="${allProvince!=null}">
<c:forEach var="province" items="${allProvince}">
<c:if test="${user.province==province.pid}">
<option value="${province.pid}" selected="selected">${province.pname}</option>
</c:if>
<c:if test="${user.province!=province.pid}">
<option value="${province.pid}" >${province.pname}</option>
</c:if>
</c:forEach>
</c:if>
</select>
<select id="city" name="user.city">
<option value="${user.city}">-请选择城市-</option>
</select>
public String showCity()throws Exception{
List<City> allCity=provinceService.findCityByPid(user.getProvince());
//使用org.Json来拼写字符串
JSONObject root=new JSONObject(); //定义
JSONArray array=new JSONArray();
//迭代循环将每个对象obj放入数组array
Iterator<City> iter=allCity.iterator();
while (iter.hasNext()) {
City city=iter.next();
JSONObject obj=new JSONObject();
obj.put("cid", city.getCid());
obj.put("cname", city.getCname());
array.put(obj);
}
//将array数组放入节点root对象中返回给Ajax调用
root.put("allCity", array);
HttpServletResponse response=ServletActionContext.getResponse(); //取得response对象
response.setCharacterEncoding("GBK");
response.setContentType("text/html");
PrintWriter out=response.getWriter();
out.print(root.toString());
out.close();
return null;
}