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();
}
}
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。
文章由极客之音整理，本文链接：https://www.bmabk.com/index.php/post/75232.html
