Java_web简单实现地区三级联动

最新推荐文章于 2022-02-05 22:27:04 发布

林林林林七

最新推荐文章于 2022-02-05 22:27:04 发布

阅读量1k

点赞数 2

CC 4.0 BY-SA版权

分类专栏： Java 文章标签： json java jquery ajax

本文链接：https://blog.csdn.net/weixin_47582287/article/details/107827406

Java 专栏收录该内容

2 篇文章

订阅专栏

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

使用技术 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>