省市区三级联动

最新推荐文章于 2024-08-27 15:59:21 发布

陈小唬

最新推荐文章于 2024-08-27 15:59:21 发布

阅读量191

点赞数 8

文章标签： javascript maven spring boot java

本文链接：https://blog.csdn.net/m0_56353506/article/details/136480702

版权

前端:

<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%@ taglib prefix="form" uri="http://www.springframework.org/tags/form" %>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt" %>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions" %>
<%request.setAttribute("ctx", request.getContextPath());%>
<html>
<head>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="${ctx}/css/bootstrap.min.css">
    <link rel="stylesheet" href="${ctx}/css/bootstrap-theme.min.css">
    <script src="${pageContext.request.contextPath}/js/jquery-1.11.3.js"></script>
    <script type="text/javascript">
        $.ajaxSettings.async=false;
        $(function (){
            /*追加初步的 省级下拉框*/
            $.post("/linkage/city",{"level":0},function (obj) {
                $.each(obj,function (){
                    $("#id1").append("<option value='"+this.id+"'>"+this.name+"</option>")
                })
            },"json");

            findCity1();
            findCity2();
        })

        findCity1=()=>{
            $("#id2").empty();
            var id=$("#id1").val();
            $.post("/linkage/city",{"level":1,"id":id},function (obj) {
                $.each(obj,function (){
                    $("#id2").append("<option value='"+this.id+"'>"+this.name+"</option>")
                })
            },"json");
            findCity2();
        }
        findCity2=()=>{
            $("#id3").empty();
            var id=$("#id2").val();
            $.post("/linkage/city",{"level":2,"id":id},function (obj) {
                $.each(obj,function (){
                    $("#id3").append("<option value='"+this.id+"'>"+this.name+"</option>")
                })
            },"json")
        }
    </script>
</head>
<body>
<table>
    <tr><td>地址:</td></tr>
    <tr>
        <td>
            请选择: <select name="id1" id="id1" onchange="findCity1();">
        </select>
        </td>
    </tr>
    <tr>
        <td>
            请选择: <select name="id2" id="id2" onchange="findCity2();">
            <option value=""></option>
        </select>
        </td>
    </tr>
    <tr>
        <td>
            请选择: <select name="id3" id="id3">
            <option value=""></option>
        </select>
        </td>
    </tr>
</table>

</body>
</html>

前端通过ajax发送数据到后端后，后端就接收参数进行组合查询就好了

sql语句:

<mapper namespace="www.com.practice.mapper.LinkageMapper">
    <select id="findCity" parameterType="www.com.practice.pojo.City"
            resultType="www.com.practice.pojo.City">
        select * from city where level=#{level}
        <if test="id != null and id !=''">
            and parent_id=#{id}
        </if>
    </select>

</mapper>