简单三级联动

页面:

<%--
  Created by IntelliJ IDEA.
  User: songzhen
  Date: 2017/9/8
  Time: 20:02
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path;
%>
<html>
<head>
    <title>三级联动</title>
    <script type="text/javascript" src="../jq/jquery.min.js"></script>
    <script type="text/javascript">

        $(function () {
            alert("//")
            $("#s").change(function () {
                $.ajax({
                    url: '<%=basePath%>/news/selectsj.action',
                    type: 'get',
                    dataType: 'text',
                    data: {pid: $("#s").val()},
                    success: function (data) {
                        $("#s1").empty();
                        $.each(eval(data), function (i, item) {
                            $("<option value='" + item.id + "'>" + item.name + "</option>").appendTo($("#s1"));
                        });
                    },
                    error:
                        function () {
                            alert("系统出错");
                        }
                });
            });

            $("#s1").change(function () {
                $.ajax({
                    url: '<%=basePath%>/news/selectsj.action',
                    type: 'get',
                    dataType: 'text',
                    data: {pid: $("#s1").val()},
                    success: function (data) {
                        $("#s2").empty();
                        $.each(eval(data), function (i, item) {
                            $("<option value='" + item.id + "'>" + item.name + "</option>").appendTo($("#s2"));

                        });
                    },
                    error:
                        function () {
                            alert("系统出错");
                        }
                });
            });
        })
        ;
    </script>
</head>
<body>
<select id="s">
    <option>请选择</option>
    <c:forEach items="${list}" var="li">
        <option value="${li.id}">${li.name}</option>
    </c:forEach>
</select>
<select id="s1">
    <option>请选择</option>
</select>
<select id="s2">
    <option>请选择</option>
</select>


</body>
</html>
 

jar包:

<!--发送邮件-->
<dependency>
<groupId>javax.mail</groupId>
<artifactId>javax.mail-api</artifactId>
<version>1.5.5</version>
</dependency>
<dependency>
<groupId>com.sun.mail</groupId>
<artifactId>javax.mail</artifactId>
<version>1.5.5</version>
</dependency>

controller:

 @RequestMapping("/selectshuju")
    public String selectDictionary(@RequestParam int pid, Model model){
        System.out.println(pid);
        List<Dictionary> dictionaries = newsService.selectDictionary(pid);
        model.addAttribute("list",dictionaries);
        return "/dictionary";
    }
    @RequestMapping("/selectsj")
    @ResponseBody
    public List<Dictionary> selectsj(@RequestParam int pid, Model model){
        System.out.println(pid);
        List<Dictionary> list = newsService.selectDictionary(pid);
        System.out.print(list);
        model.addAttribute("list",list);
        return list;
    }

原文地址:https://www.cnblogs.com/Dream--/p/7570730.html