三级联动下拉框，获取省市区信息（内附Oracle城市三级联动数据表）

Oracle省市区三级联动数据表

Oracle省市区三级联动表：https://pan.baidu.com/s/1pK8TvSZ

使用环境，楼主使用B-JUI前段框架+freeMaker样式。SSM后端架构

样式和赋值方面可以自行修改，主要讲解一下思路：
楼主是点击按钮弹出dialog弹框进行添加操作用到的，省市区三级联动
在点击添加按钮时请求后台，进行查询所有地区信息
查询结果未Map集合，使用this.setAttribute(“p”, page);传到前端
得到的p对象的result属性是一个list集合，里面封装了查询出的所有地区信息AREA_NAME是地区名AREA_ID为地区ID

<div style="clear: both">
    <p style="float:left;">
        <label style="width:80px;"> 地区： </label>
        <select  class="selectpicker" id="myc"  style="width:75px;;" name="province" onchange="getNextArea(this)" selectvl_event="true" selectvl="${(info.province)!}" class="required">
            <option value="">${(info.province)!"请选择"}</option> 
            <#list p.results as pro>
            <option value="${(pro["AREA_ID"])!}">${(pro["AREA_NAME"]!)}</option>
            </#list>
        </select> 
        <select data-rule="required" class="required" class="selectpicker" name="city" style="width:75px;;" id="comboxchcity" onchange="getNote(this)" selectvl_event="true" selecttext="${(info.city)!}"   class="required">  
            <option value="请选择">${(info.city)!"请选择"}</option>
        </select>
        <select data-rule="required" class="required" class="selectpicker" name="district" style="width:75px;;" id="comboxcharea"  selecttext="${(info.district)!}"   class="required">    
            <option value="请选择">${(info.district)!"请选择"}</option>
        </select>
    </p>    
</div>

getNextArea(this)函数的参数表示，当前下拉框点击的地区对应的id

下面是点击的js

function getNextArea(obj){
    var prent_id=$(obj).val();
    if(prent_id!=""){
        prent_id=prent_id.split(",")[0]
        $("#comboxchcity option:gt(0)").remove();
        $("#comboxcharea option:gt(0)").remove();
        $.post("/pay_backstage/enterpriseBase/getCity",{"code":prent_id},function(data){
            $.each(data,function(i,v){
                $("#comboxchcity").append("<option value='"+v["AREA_ID"]+"'>"+v["AREA_NAME"]+"</option>");
            });
        changeCheck("comboxchcity");
        },"json");
    }
}

进行操作：先清除后两个下拉框的选中信息，

点击一级下拉框进行请求后台，传给后台一个当前选择的一级下拉框的菜单id，
post请求后台查询数据进行this.setAttribute(“p”, page);
然后给二级下拉框循环赋值（查询出的该地区下面的城市）

function getNote(obj){
    var prent_id=$(obj).val();
    if(prent_id!=""){
        prent_id=prent_id.split(",")[0];
        $("#comboxcharea option:gt(0)").remove();
        $.post("/pay_backstage/enterpriseBase/getCity",{"code":prent_id},function(data){

            $.each(data,function(i,v){
                $("#comboxcharea").append("<option value='"+v["AREA_ID"]+"'>"+v["AREA_NAME"]+"</option>");
            });
            changeCheck("comboxcharea");
        },"json");
    }
}

三级下拉框和二级原理相同。