Jquery省市区三级联动案例
//Java部分代码
public String province() throws Exception {
List<Province> list=cityBiz.showProvince();//省份对象集合
//解析集合用的方法
JSONArray json=JSONArray.fromObject(list);
System.out.println(json);
response.setContentType("text/html;charset=utf-8");
PrintWriter out=null;
try {
out=response.getWriter();
} catch (Exception e) {
e.printStackTrace();
}
//将省份的json字符串响应给jquery的ajax
out.print(json.toString());
out.close();
return null;
}
public String city() throws Exception {
String pid=request.getParameter("pid");
//根据选择的省份去查询对应的城市对象集合
List<City> list=cityBiz.showCity(pid);
JSONArray json=JSONArray.fromObject(list);
System.out.println(json);
response.setContentType("text/html;charset=utf-8");
PrintWriter out = null;
try {
out = response.getWriter();
} catch (Exception e) {
e.printStackTrace();
}
//将城市的json字符串响应给jquery的ajax
out.print(json.toString());
out.close();
return null;
}
public String district() throws Exception {
String cid=request.getParameter("cid");
//根据选中的城市拿到对应的区域对象集合
List<District> list=cityBiz.showDistrict(cid);
JSONArray json=JSONArray.fromObject(list);
System.out.println(json);
response.setContentType("text/html;charset=utf-8");
PrintWriter out = null;
try {
out = response.getWriter();
} catch (Exception e) {
e.printStackTrace();
}
//将区域的json字符串响应给jquery的ajax
out.print(json.toString());
out.close();
return null;
}
2、JS和HTML代码
<script type="text/javascript">
$(function(){
$.ajax({
type:"post",
url: "testAction!province?time="+Math.random(),
dataType:"json",//指定返回的格式
success:function(data){
for(var i=0;i<data.length;i++){
var pid=data[i].pid//返回对象的一个属性
var pname=data[i].pname;
$("<option value='"+pid+"'>"+pname+"</option>").appendTo($("#pid"));//添加下拉列表
}
}
});
$(function(){
$("#pid").change(function(){
//清空下面两个子下拉列表(option中value值大于0的删除)
$("#cid option:gt(0)").remove();
$("#did option:gt(0)").remove();
if($("#pid").val()==-1){
return;//没有选择的就不去调用
}
//使用post方式
$.post(
"testAction!city?time="+Math.random(),
{"pid":$("#pid").val()},//参数
function(data){
for(var i=0;i<data.length;i++){
var cid=data[i].cid;
var cname=data[i].cname;
$("<option value='"+cid+"'>"+cname+"</option>").appendTo($("#cid"));//添加下拉列表
}
},
"json"//指定返回类型
);
});
});
$(function(){
$("#cid").change(function(){
$("#did option:gt(0)").remove();
if($("#cid").val()==-1){
return;
}
$.getJSON(//这种访问方式返回的就是JSON格式数据
"testAction!district?time="+Math.random(),
{"cid":$("#cid").val()},
function(data){
for(var i=0;i<data.length;i++){
var did=data[i].did;
var dname=data[i].dname;
$("<option value='"+did+"'>"+dname+"</option>").appendTo($("#did"));
}
}
);
});
});
});
</script>
<body>
省份:<select id="pid">
<option value="-1">请选择</option>
</select><br>
城市:<select id="cid">
<option value="-1">请选择</option>
</select><br>
区域:<select id="did">
<option value="-1">请选择</option>
</select><br>
</body>
