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

矫情吗；* 2022-07-24 09:12 162阅读 0赞

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

运行截图：

![Center][]

源码下载：[http://download.csdn.net/detail/u014676619/9524740][http_download.csdn.net_detail_u014676619_9524740]

[Center]: /images/20220722/ad34307b2f454b2cbe6441d10be1d7e4.png
[http_download.csdn.net_detail_u014676619_9524740]: http://download.csdn.net/detail/u014676619/9524740