簡單三級聯動

時間 2019-11-09

標籤簡單三級聯動简体版

原文原文鏈接

頁面：javascript

<%--
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包：html

<!--發送郵件-->
<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：java

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

相關標籤/搜索

每日一句

每一个你不满意的现在，都有一个你没有努力的曾经。