省市县三级联动获取地址

最新推荐文章于 2022-11-29 12:07:45 发布

HelloKittyn

最新推荐文章于 2022-11-29 12:07:45 发布

阅读量815

点赞数

CC 4.0 BY-SA版权

分类专栏：前端系列文章标签： mysql字符串截取省市县三级联动

本文链接：https://blog.youkuaiyun.com/Lining_s/article/details/83353127

前端系列专栏收录该内容

7 篇文章

订阅专栏

1.jsp代码

前端传参格式:(type,codeId)
type:三种类型(“province” || “city” || “area”)
codeId:为选择省的时后自动传入.
后台返回JSON数据格式:
在这里插入图片描述

<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
    <title>我的测试</title>
</head>
<body>
<div style="width: 350px;height: 100px;border: 1px solid orangered">
    <select id="selProvince">
        <option value="">--请选择省--</option>
    </select>
    <select id="selCity">
        <option value="">--请选择市--</option>
    </select>
    <select id="selArea">
        <option>--请选择区/县--</option>
    </select>
    <p><input type="text" id="addr" style="background-color: whitesmoke" readonly></p>
</div>
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script>
    $(function () {
        getProvince('0',"province");
        $("#selProvince").on("change",function () {
            var pid=$("#selProvince").val();
            getProvince(pid,"city");
            $("#selArea").empty();
            $("#selArea").append('<option value="" selected>--请选择区/县--</option>');
        });
        $("#selCity").on("change",function () {
            var pid=$("#selCity").val();
            getProvince(pid,"area");
        });
        $("#selArea").on("change",function () {
             var province=$("#selProvince").val();
             var city=$("#selCity").val();
             var area=$("#selArea").val();
             $("#addr").val(province+","+city+","+area);
        })
    });
    function getProvince(codeId,type) {
        $.ajax({
            url:"getProCityTown",
            type:"post",
            dataType:"json",
            data:{"codeId":codeId,"type":type},
            success:function(data){
                var content="";
                if(type == 'province'){
                    $("#selProvince").empty();
                }else if(type == 'city'){
                    $("#selCity").empty();
                }else if(type == 'area'){
                    $("#selArea").empty();
                }
                var data=data.page.list;
                for(var i=0;i<data.length;i++){
                    if(i == 0 && type == 'province'){
                        content+='<option value="" disabled>--请选择省--</option>';
                    }else if(i == 0 && type == 'city'){
                        content+='<option value="" >--请选择市--</option>';
                    }else if(i == 0 && type == 'area'){
                        content+='<option value="" disabled>--请选择区/县--</option>';
                    }
                    content+='<option value="'+data[i].id+'">'+data[i].title+'</option>';
                }
                if(type == 'province'){
                    $("#selProvince").append(content);
                }else if(type == 'city'){
                    $("#selCity").append(content);
                }else if(type == 'area'){
                    $("#selArea").append(content);
                }
            },
            error:function (data) {
                alert(data.msg);
            }
        });
    }
</script>
</body>
</html>

2.显示效果

3.后台获取省市县的code值,查询数据库得到地址

 SELECT province.title,province.id from province where province.id=(SELECT SUBSTRING_INDEX("12,191,2185",',',1) as 'pid')
 UNION ALL
 SELECT city.title ,city.id from city where city.id= (SELECT SUBSTRING_INDEX(substring("12,191,2185",1,6),',',-1) as 'pid')
 UNION ALL
 SELECT county.title, county.id from county where county.id=(SELECT SUBSTRING_INDEX("12,191,2185",',',-1) as 'pid')