三级联动前端以及接口

1、html部分

    <div class="form-group">
        <label class="col-sm-2 control-label">地区：</label>
        <div class="col-sm-5">

            <div class="col-sm-4" style="padding-left: 0;">
                <select class="form-control" name="province" id="province">
                <option>===请选择===</option>
                </select>
            </div>
            <div class="col-sm-4" style="padding: 0;">
                <select class="form-control" name="city" id="city">
                <option>===请选择===</option>
                </select>
            </div>
            <div class="col-sm-4" style="padding-right: 0;">
                <select class="form-control" name="village" id="village">
                <option>===请选择===</option>
            </select>
        </div>
        </div>
    </div>

2、js部分

    $(function() {
        //默认绑定省
        ProviceBind();
        //绑定事件
        $("#province").change( function () {
            CityBind();
        });
        $("#city").change(function () {
            VillageBind();
        });
    });
    function Bind(str) {

        $("#province").val(str);
    }
    function ProviceBind() {
        //清空下拉数据
        $("#province").html("");
        var str = "<option>==请选择===</option>";
            $.ajax({
            type: "GET",
            url: getWebBasePath()+"/api/v1/address?parentId=&myColums=Province",
            //                data: JSON.stringify({ "parentId": "", "MyColums": "Province" }),
            dataType: "JSON",
            async: false,
            success: function (data) {
            //从服务器获取数据进行绑定
            $.each(data.data, function (i, item) {
                str += "<option value=" + item.Id + ">" + item.MyTexts + "</option>";
            })
            //将数据添加到省份这个下拉框里面
            $("#province").append(str);
            },
            error: function (e) { alert(e); }
        });
    }
    function CityBind() {
        var provice = $("#province").val();
        //判断省份这个下拉框选中的值是否为空
        if (provice == "") {
        return;
        }
        $("#city").html("");
        var str = "<option>==请选择===</option>";

        $.ajax({
            type: "GET",
            url: getWebBasePath()+"/api/v1/address?parentId="+provice+"&myColums=City",
            //                data: JSON.stringify({ "parentId": provice, "MyColums": "City" }),
            dataType: "JSON",
            async: false,
            success: function (data) {
            //从服务器获取数据进行绑定
            $.each(data.data, function (i, item) {
                str += "<option value=" + item.Id + ">" + item.MyTexts + "</option>";
            })
            //将数据添加到省份这个下拉框里面
            $("#city").append(str);
            },
            error: function () { alert("Error"); }
        });

        $("#village").html("");
        var strVillage = "<option>==请选择===</option>";
        $("#village").append(strVillage);
    }
    function VillageBind() {
        var provice = $("#city").val();
        //判断市这个下拉框选中的值是否为空
        if (provice == "") {
            return;
        }
        $("#village").html("");
        var str = "<option>==请选择===</option>";
        //将市的ID拿到数据库进行查询，查询出他的下级进行绑定
        $.ajax({
            type: "GET",
            url: getWebBasePath()+"/api/v1/address?parentId="+provice+"&myColums=Village",
            dataType: "JSON",
            async: false,
            success: function (data) {
            //从服务器获取数据进行绑定
            $.each(data.data, function (i, item) {
                str += "<option value=" + item.Id + ">" + item.MyTexts + "</option>";
            })
            //将数据添加到省份这个下拉框里面
            $("#village").append(str);
            },
            error: function () {
                alert("Error");
            }
        });
    }

3、接口部分

    //controller
    @RequestMapping(value = "/address", method = { RequestMethod.GET })
    @ResponseBody
    public Output getAddress(@RequestParam("parentId") String parentId,@RequestParam("myColums") String myColums) throws Exception {
        return Result.success(biMATRiXAddressService.findAddress(parentId,myColums));
    }
    //dao
    public List<Map<String, Object>> findAddress(String parentId, String myColums) {
        String sql = "SELECT * FROM bimatrix_address WHERE 1=1 and MyTables='SysPerson'and MyColums=:myColums and ParentId=:parentId  ";

        return session().createSQLQuery(sql).setString("parentId",parentId).setString("myColums",myColums)
        .setResultTransformer(Transformers.ALIAS_TO_ENTITY_MAP).list();
    }

    //数据表结构
    CREATE TABLE bimatrix_address(
        `Id` varchar(36) NOT NULL,
        `MyTexts` varchar(200) NOT NULL,
        `ParentId` varchar(36) NULL,
        `MyTables` varchar(200) NULL,
        `MyColums` varchar(200) NULL,
        `Sort` int NULL,
        `Remark` varchar(4000) NULL,
        `CreateTime` date NULL,
        `CreatePerson` varchar(200) NULL,
        `UpdateTime` date NULL,
        `UpdatePerson` varchar(200) NULL
    )

4、省市县数据下载 
    http://download.csdn.net/download/leesmn/10265485