layui省市区三级联动-公司自用整理

jsp页面

    <div class="layui-input-block" style="margin-top: 30px">
        <em class="i-bit">*</em><span>所&nbsp;&nbsp;在&nbsp;&nbsp;地&nbsp;&nbsp;区：</span>
        <select id="addrProvince" name="addrProvince" onchange="getCities()"
            style="width: 125px;height:30px; "></select> 城市： <select
            id="addrCity" name="addrCity" onchange="getAreas()"
            style="width: 125px;height:30px; ">
        </select> 区/县： <select id="addrArea" name="addrArea"
            style="width: 125px;height:30px; ">
        </select> <span id="recvId"></span>
    </div>

js代码

<script type="text/javascript">
        $(function(){
        getProvinces();
            var op1 = document.createElement("option");
            op1.value = -1;
            op1.text ="----- 所在市 -------";
            document.getElementById("addrCity").appendChild(op1); 
            var op2 = document.createElement("option");
            op2.value = -1;
            op2.text = "----- 所在区 -------";
            document.getElementById("addrArea").appendChild(op2); 
    });
</script>
<script type="text/javascript">
    // ===== 加载省列表 =====
function getProvinces() {
    var url = "<%=basePath%>dict/getProvinces";
    $.ajax({
        "url": url,
        "type": "GET",
        "dataType": "json",
        "success": function(data) {
            var op = document.createElement("option");
            op.value = -1;
            op.text = "----- 所在省 -------";
            document.getElementById("addrProvince").appendChild(op);
            for (var i = 0; i < data.length; i++) {
                var op = document.createElement("option");
                op.value = data[i].province_code;
                op.text = data[i].province_name;
                document.getElementById("addrProvince").appendChild(op);
            }
        }
    });
    getCities();
}
// ===== 加载市列表 =====
function getCities() {
    $("#addrCity").empty();
    $("#addrArea").empty();    
    var url = "<%=basePath%>dict/getCities";
    var data = "provinceCode=" + $("#addrProvince").val();
    $.ajax({
        "url": url,
        "data": data,
        "type": "GET",
        "dataType": "json",
        "success": function(data) {
             var op = document.createElement("option");
            op.value = -1;
            op.text ="----- 所在市 -------";
            document.getElementById("addrCity").appendChild(op); 
            for (var i = 0; i < data.length; i++) {
                var op = document.createElement("option");
                op.value = data[i].city_code;
                op.text = data[i].city_name;
                document.getElementById("addrCity").appendChild(op);
            }
        }
    });
    getAreas();
            var op2 = document.createElement("option");
            op2.value = -1;
            op2.text = "----- 所在区 -------";
            document.getElementById("addrArea").appendChild(op2); 
}
// ===== 加载区列表 =====
function getAreas() {
    $("#addrArea").empty();
    var url = "<%=basePath%>dict/getAreas";
    var data = "cityCode=" + $("#addrCity").val();
    $.ajax({
        "url": url,
        "data": data,
        "type": "GET",
        "dataType": "json",
        "success": function(data) {
            var op = document.createElement("option");
            op.value = -1;
            op.text = "----- 所在区 -------";
            document.getElementById("addrArea").appendChild(op); 
            for (var i = 0; i < data.length; i++) {
                var op = document.createElement("option");
                op.value = data[i].area_code;
                op.text = data[i].area_name;
                document.getElementById("addrArea").appendChild(op);
            }
        }
    });
}
</script>

实现层

@Override
    public List<Object> getProvinces() {
        String querySql="SELECT " +
                                        "id," +
                                        "province_code," +
                                        "province_name " +
                                    "FROM " +
                                        "t_dict_provinces";
        List<Object> entityListBySQL = dao.getEntityListBySQL(querySql, null, new ProvincesDO());
        return entityListBySQL;
    }

    @Override
    public List<Object> getCities(String provinceCode) {
        String querySql="SELECT " +
                                        "id," +
                                        "province_code  ," +
                                        "city_code  ," +
                                        "city_name " +
                                    "FROM " +
                                        "t_dict_cities " +
                                    "WHERE " +
                                        "province_code="+provinceCode;
        List<Object> entityListBySQL = dao.getEntityListBySQL(querySql, null, new CitiesDO());
        return entityListBySQL;
    }

    @Override
    public List<Object> getAreas(String cityCode) {
        String querySql="SELECT " +
                "id," +
                "city_code  ," +
                "area_code," +
                "area_name " +
            "FROM " +
                "t_dict_areas " +
            "WHERE " +
                "city_code="+cityCode;
        List<Object> entityListBySQL = dao.getEntityListBySQL(querySql, null, new AreasDO());
        return entityListBySQL;
    }