Java_web简单实现地区三级联动

简单分享一下地区三级联动的代码思路

使用技术 Jquery AJAX JSON Druid

数据库思路
本人较懒 采用单表查询 在此不做过多数据,仅做几列数据用来参考
思路于下:
id列 tid列 name列
将所有的省份tid赋值为0
省的id列可管可不管—省!省!省!
将省的id赋值给市的tid
市的tid则改为省的id+上123456789等数字
将市的id赋值给区的tid
方便管理可以将区的id改为tid+123456789等数字
如:
描述

现在直接上代码~
项目总览:
项目
我采用的接口方法可以不写。
Servlet–获取地区

 		response.setContentType("text/xml;Charset=UTF-8");
        int tid = Integer.parseInt(request.getParameter("tid"));
        List<PCD> pcdList = testService.findPCDByPid(tid);
        ObjectMapper mapper = new ObjectMapper();
        String json = mapper.writeValueAsString(pcdList);
        response.getWriter().write(json);

dao–获取数据 我采用的druid,你们可以自己修改~

 private static JdbcTemplate jdbcTemplate = new JdbcTemplate(DruidUtil.getDs());
    public List<PCD> findPCDByPid(int pid) {
        String sql = "select * from test where tid=?";
        List<PCD> list = jdbcTemplate.query(sql,new BeanPropertyRowMapper<>(PCD.class),pid);
        return list;
    }

entity–实体类 PCD-省市区

    private int id;
    private int tid;
    private String name;
    //自己加Getter和Setter等方法~

JSP

<%--
  Created by IntelliJ IDEA.
  User: QiLin
  Date: 2020/8/5
  Time: 22:38
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>Title</title>
</head>
<body>
<center>
<%----%>
    <select id="province"name="province" onchange="cC()">
        <option value="">--选择省--</option>
    </select><br><br><br>
<%----%>
    <select id="city" name="city" onchange="cD()">
        <option value="">--选择市--</option>
    </select><br><br><br>
<%--()--%>
    <select id="district" name="district" >
        <option value="">--选择县()--</option>
    </select><br><br><br>
</center>
</body>
</html>
<script src="js/jquery-3.3.1.min.js"></script>
<script type="text/javascript">
    $(function(){
    //初始化数据给省
        $.ajax({
            type:"POST",
            url:"Get",
            data:{"tid":0},
            dataType:"json",
            success:function(data){
                for(var i=0;i<data.length;i++){
                    var val = $("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
                    $("#province").append(val);
                }
            }
        });
    });

    function cC(){
        //获取选中的option标签的value的属性值
        var tid = $("#province").val();
        $.ajax({
            url:"Get",
            data:{"tid":tid},
            dataType:"json",
            success:function(data){
                //清空城市以及区下拉列表框的内容
                $("#city").html("<option value=''>-- 请选择市 --</option>");
                $("#district").html("<option value=''>-- 请选择区/县 --</option>");
                //遍历json,json数组中每一个json,都对应一个省的信息,都应该在省的下拉列表框下面添加一个<option>
                for(var i=0;i<data.length;i++){
                    var val = $("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
                    $("#city").append(val);
                }
            }
        });
    }

    function cD(){
        var tid = $("#city").val();
        $.ajax({
            url:"Get",
            data:{"tid":tid},
            dataType:"json",
            success:function(data){
                //清空城市以及区下拉列表框的内容
                $("#district").html("<option value=''>-- 请选择区/县 --</option>");
                for(var i=0;i<data.length;i++){
                    var val = $("<option value='"+data[i].id+"'>"+data[i].name+"</option>");
                    $("#district").append(val);
                }
            }
        });
    }
</script>

实现效果
效

如有不懂可以评论=-=

希望有所收获~

©️2020 CSDN 皮肤主题: 1024 设计师:上身试试 返回首页