jQuery三级联动

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;

}