1.三级联动
$(document).ready(function(){
//从数据库中查询省的信息,显示在select id="province"的下拉列表中
$.post("listAction.do?method=listProvince",function(data,textStatus){
//将data转化为js可以识别的格式
var dataObj=eval("("+data+")");
for(int i=0;i<dataObj.length;i++){
var pid=dataObj[i].pid;
var pname=dataObj[i].pname;
$option=$("<option></option>");
$option.attr("value",pid);
$option.text(pname);
$("#province").append($option);
}
});
});
//省的变化引起城市的变化
$("#province").change(function(){
$.post("listAction.do?method=listCity",{pid:pid}function(data,textStatus){
//清空城市下<option>保留请选择
方法一:
$("#city option").each(function(index,domEle){
if(index!=0){
$(this).remove();
}
}
方法二:批量删除
$("#city option[value!=""]).remove();
for(int i=0;i<dataObj.length;i++){
var cid=dataObj[i].cid;
var cname=dataObj[i].cname;
$option=$("<option></option>");
$option.attr("value",cid);
$option.text(cname);
$("#province").append($option);
}
});
});
java类ProvinceListAction:
public ActionForward listProvince(){
response.setContentType("text/html;charset=utf-8");
PrintWriter out=response.getWriter();
DaoPrivince daoProvince=new DaoProvinceImpl();
List<Province> list=daoProvince.findAllProvince();
//转化为json格式
JSONArray jsonArray=JSONArray.fromObject(list);
out.println(jsonArray.toString());
return null;
}
CityListAction:
public listCity(){
response.setContentType("text/html;charset=utf-8");
PrintWriter out=response.getWriter();
String spid=request.getParameter("pid");
Integer pid=0;
if(spid!=null&&!"".equals(spid.trim())){
pid=Integer.parseInt(spid.trim());
}
DaoCity daoCity=new DaoCityImpl();
List<City> list=daoCity.findCityByPid(pid);
//转化为json格式
JSONArray jsonArray=JSONArray.fromObject(list);
out.println(jsonArray.toString());
return null;
}