省市区镇村五级联查从零到实现

数据
github翻到底找到一个大佬的Sqlite数据 下载sqlite数据库运行将数据导出成sql文件
然后写个工具类修改sql文件中的表字段,本地postgresql数据库进行建表运行sql文件插值。
页面下拉框

<div class="form-group">
                                                <label>地址</label>
                                                <div>
                                                    <select class="select" id="addr_province" name="province_code" onchange="getCity()">
                                                        <option value="-1">请选择</option>
                                                    </select>

                                                    <select class="select" id="addr_city" name="city_code" onchange="getDistrict()">
                                                        <option value="-1">请选择</option>
                                                    </select>

                                                    <select class="select" id="addr_district" name="district_code" onchange="getTown()" >
                                                        <option value="-1">请选择</option>
                                                    </select>
                                                    <select class="select" id="addr_town" name="town_code" onchange="getVillage()">
                                                        <option value="-1">请选择</option>
                                                    </select>
                                                    <select class="select" id="addr_village" name="town_code">
                                                        <option value="-1">请选择</option>
                                                    </select>
                                                </div>
                                            </div>

js逻辑
在页面加载时调用了加载省的方法!

/*
* 五级联查下拉框的地址信息查询
* */
    function getProvince(){
        $.ajax({
            type: "post",
            url: "addr_queryAddr",
            data:{id:'0'},
            success: function (data) {
                for (var i = 0; i < data.length; i++) {
                    $('#addr_province').append("<option value='" + data[i].id + "' >" + data[i].name + "</option>")
                }
            },
            error: function () {
                alert("加载省失败");
            }
        });
    }

    function getCity(){
        $('#addr_city').empty();
        $('#addr_district').empty();
        $('#addr_town').empty();
        $('#addr_village').empty();
        $.ajax({
            type: "post",
            url: "addr_queryAddr",
            data: {id:$('#addr_province option:selected').val()},
            success: function (data) {
                $('#addr_city').append("<option value='' selected='selected' >" + '请选择' + "</option>");
                $('#addr_district').append("<option value='' selected='selected' >" + '请选择' + "</option>");
                $('#addr_town').append("<option value='' selected='selected' >" + '请选择' + "</option>");
                $('#addr_village').append("<option value='' selected='selected' >" + '请选择' + "</option>");
                for (var i = 0; i < data.length; i++) {
                    $('#addr_city').append("<option value='" + data[i].id + "' >" + data[i].name + "</option>");
                }
            },
            error: function () {
                alert("加载市失败");
            }
        });
    }

    function getDistrict(){
        $('#addr_district').empty();
        $('#addr_town').empty();
        $('#addr_village').empty();
        $.ajax({
            type: "post",
            url: "addr_queryAddr",
            data: {id:$('#addr_city option:selected').val()},
            success: function (data) {
                $('#addr_district').append("<option value='' selected='selected' >" + '请选择' + "</option>");
                $('#addr_town').append("<option value='' selected='selected' >" + '请选择' + "</option>");
                $('#addr_village').append("<option value='' selected='selected' >" + '请选择' + "</option>");
                for (var i = 0; i < data.length; i++) {
                    $('#addr_district').append("<option value='" + data[i].id + "' >" + data[i].name + "</option>");
                }
            },
            error: function () {
                alert("加载县或区失败");
            }
        });
    }

    function getTown(){
        $('#addr_town').empty();
        $('#addr_village').empty();
        $.ajax({
            type: "post",
            url: "addr_queryAddr",
            data:{id: $('#addr_district option:selected').val()},
            success: function (data) {
                if (data.length == 0){
                    $('#addr_town').append("<option value='' selected='selected' >" + '无' + "</option>");
                    $('#addr_village').append("<option value='' selected='selected' >" + '无' + "</option>");
                }else{
                    $('#addr_town').append("<option value='' selected='selected' >" + '请选择' + "</option>");
                    $('#addr_village').append("<option value='' selected='selected' >" + '请选择' + "</option>");
                    for (var i = 0; i < data.length; i++) {
                        $('#addr_town').append("<option value='" + data[i].id + "' >" + data[i].name + "</option>");
                    }
                }
            },
            error: function () {
                alert("加载镇或街道失败");
            }
        });
    }

    function getVillage(){
        $('#addr_village').empty();
        $.ajax({
            type: "post",
            url: "addr_queryAddr",
            data: {id:$('#addr_town option:selected').val()},
            success: function (data) {
                    if(data.length==0){
                        $('#addr_village').append("<option value='' selected='selected' >" + '无' + "</option>");
                    }else {
                        $('#addr_village').append("<option value='' selected='selected' >" + '请选择' + "</option>");
                        for (var i = 0; i < data.length; i++) {
                            $('#addr_village').append("<option value='" + data[i].id + "' >" + data[i].name + "</option>");
                        }
                    }
            },
            error: function () {
                alert("加载村失败");
            }
        });
    }

后台代码
采用是ssm框架 基本的三层查询都没有别的业务逻辑!都只有一个方法!

总洁
边学习 边借鉴网上代码
这次用到了 jquery jsp SSm PostgreSql Sqlite 自定义工具类转换插值的sql!

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值