jQuery二级联动

最新推荐文章于 2022-04-06 21:45:53 发布

小小志秩

最新推荐文章于 2022-04-06 21:45:53 发布

阅读量2.1k

点赞数 1

分类专栏：前端文章标签： JQuery

本文链接：https://blog.csdn.net/z2014ypd/article/details/88423523

版权

前端专栏收录该内容

22 篇文章 1 订阅

订阅专栏

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();
	}
}