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>
郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
