JQuery实现省份城市二级联动
前端代码
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>二级联动</title>
<script type="text/javascript" src="js/jquery-1.11.2.min.js"></script>
<script type="text/javascript">
$(function() {
//页面加载完成,加载省份数据
$.getJSON("/ojbk/address.do?id=0",function(data){
$(data).each(function(index,e) {
$("#province").append("<option value='"+data[index].id+"'>"+data[index].addrName+"</option>");
});
});
//省份下拉框联动更改
$("#province").change(function() {
//自动循环删除之前的数据
$("#city option:gt(0)").remove();
if($(this).val()>0){
$.getJSON("/ojbk/address.do?id="+$(this).val(),function(data){
$(data).each(function(index,e) {
$("#city").append("<option value='"+data[index].id+"'>"+data[index].addrName+"</option>");
});
});
}
});
});
</script>
</head>
<body>
<!--
二级联动效果，其中的第一个下拉框的选项一定是页面加载完成之后就发送请求去查询省份数据
当第一个下拉框选项被改变时，再发送请求到后台查询选中的该省份下的城市
-->
<select id="province">
<option value="0">请选择省份</option>
</select>
<select id="city">
<option value="0">请选择城市</option>
</select>
</body>
</html>
后端发送数据代码
package zz.practice.servlet;
import java.io.IOException;
import java.io.PrintWriter;
import java.util.List;
import javax.servlet.ServletException;
import javax.servlet.annotation.WebServlet;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;
import com.alibaba.fastjson.JSON;
import zz.practice.dao.AddrDao;
import zz.practice.dao.impl.AddrDaoImp;
import zz.practice.domain.Address;
@WebServlet("/address.do")
public class JqueryServlet extends HttpServlet {
private AddrDao aD = new AddrDaoImp();
/**
*
*/
private static final long serialVersionUID = -5837811634156432171L;
@Override
protected void service(HttpServletRequest req, HttpServletResponse res) throws ServletException, IOException {
//处理乱码
res.setContentType("text/html;charset=utf-8");
res.setCharacterEncoding("utf-8");
//接收请求参数
String fatherId = req.getParameter("id");
//查询
List<Address> addr = aD.queryByfatherId(fatherId);
//转化为JSON
String jStr = JSON.toJSONString(addr);
PrintWriter pw = res.getWriter();
pw.write(jStr);
pw.flush();
pw.close();
}
}