SSM+Maven实现无刷新三级联动

最新推荐文章于 2018-05-11 09:42:10 发布

MasterPan_

最新推荐文章于 2018-05-11 09:42:10 发布

阅读量2.8k

点赞数 2

文章标签： SSM Maven 无刷新三级联动

本文链接：https://blog.csdn.net/u014676619/article/details/51448240

版权

jsp代码：

<%@ page language="java" contentType="text/html; charset=utf-8" pageEncoding="utf-8"%>
<%@ taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c" %>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<base href="<%=basePath%>">
<script type="text/javascript" src="js/jquery-1.10.2.js"></script>
<script type="text/javascript">
$(function() {
    $.post("test/search.do?flag=getOne",
    function(data) {
        var dataObj = eval("(" + data + ")");
        for (var i = 0; i < dataObj.length; i++) {
            var $option = $("<option></option>");
            $option.attr("value", dataObj[i].id);
            $option.text(dataObj[i].name);
            $("#one").append($option);
        }
    });
    
    $("#one").change(function() {
        var jsonObj = {
            id: $(this).val()
        };
        $("#two option[value!='']").remove();
        $("#three option[value!='']").remove();
        $.post("test/search.do?flag=getTwo&parId=" + $("#one").val(), jsonObj,
        function(data, textStatus) {
            var dataObj = eval("(" + data + ")");
            for (var i = 0; i < dataObj.length; i++) {
                var $option = $("<option></option>");
                $option.attr("value", dataObj[i].id);
                $option.text(dataObj[i].name);
                $("#two").append($option);
            }
        });
    });
    
    $("#two").change(function() {
        var jsonObj = {
            id: $(this).val()
        };
        $("#three option[value!='']").remove();
        $.post("test/search.do?flag=getThree&parId=" + $("#two").val(), jsonObj,
        function(data, textStatus) {
            var dataObj = eval("(" + data + ")");
            for (var i = 0; i < dataObj.length; i++) {
                var $option = $("<option></option>");
                $option.attr("value", dataObj[i].id);
                $option.text(dataObj[i].name);
                $("#three").append($option);
            }
        });
    });
});
</script>
</head>
<body>
	Hello World！
	<select name='one' id='one'>
		<option value="">-请选择-</option>
	</select>
	<select name='two' id='two'>
		<option value="">-请选择-</option>
	</select>
	<select name='three' id='three'>
		<option value="">-请选择-</option>
	</select>
</body>
</html>

java代码：

@Controller
@RequestMapping("/test")
public class TestController {

	@Resource
	private TestService testService;

	Logger logger = Logger.getLogger(TestController.class);

	/**
	 * 添加
	 */
	@RequestMapping("/add")
	private String add(HttpServletRequest request, Model model) {
		return null;
	}

	/**
	 * 三级联动
	 * 
	 * @throws IOException
	 */
	@RequestMapping("/search")
	private ModelAndView search(HttpServletRequest request, HttpServletResponse response, ModelAndView model) throws IOException {
		response.setCharacterEncoding("UTF-8");
		String flag = request.getParameter("flag");
		List<Test> list = null;
		JSONArray jsonarray = null;
		
		if (flag.equals("getOne")) {
			list = testService.findOne();
		} else {
			String strParId = request.getParameter("parId");
			list = strParId.equals("")?null:testService.findTwoAndThree(Integer.parseInt(request.getParameter("parId")));
		}
		jsonarray = JSONArray.fromObject(list);
		PrintWriter out = response.getWriter();
		out.print(jsonarray.toString());
		out.flush();
		out.close();
		model.addObject("list", list);
		model.setViewName("index");
		return model;
	}

}

运行截图：

源码下载：http://download.csdn.net/detail/u014676619/9524740

MasterPan_

关注

2
点赞
踩
8

收藏

觉得还不错? 一键收藏
0
评论
SSM+Maven实现无刷新三级联动

jsp代码：<% String path = request.getContextPath(); String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";%>">$(function() {
复制链接

扫一扫