博客

添加页面：

省份parentId=-1，直接从后端传入，后端写根据provinceId查询当前省份下有哪些城市，以及根据cityId查询当前城市下的县区

<div class="form-group">    
   <label class="col-sm-3 control-label">地区：</label>
   <div class="col-sm-3">
       <select id = "province" name="province" class="form-control m-b" >
           <option value="">请选择省份</option>
           <option th:each="dict : ${provinceList}" th:text="${dict.areaName}" th:value="${dict.id}"></option>
       </select>
   </div>
   <div class="col-sm-3">
       <select id="city" name="city" class="form-control m-b">
           <option value="">请选择城市</option>
       </select>
   </div>
   <div class="col-sm-3">
       <select id = "county" name="county" class="form-control m-b">
           <option value="">请选择县/区</option>
       </select>
   </div>
</div>

城市和县区用change()方法

$("#province").change(function () {
    $("#city").empty();
    $("#county").empty();
    $("#city").append("<option value=''>请选择城市</option>");
    $("#county").append("<option value='0'>请选择县/区</option>");
    var provinceId = $("#province").val();
    if (provinceId == '') {
        $.modal.alertWarning('请先选择省份');
        return false;
    }
    $.ajax({
        url:prefix + "/searchCityList/" + provinceId,
        dataType:"json",
        type:"GET",
        success:function (data){
            console.log(data);
            if (data.code == 0) {
                $.each(data.data.cityList, function (infoIndex, info) {  //循环遍历后台传过来的json数据
                    $("#city").append("<option value='" + info["id"] +  "'>" + info["areaName"] + "</option>");
                    // $("#test").append("<option value='5'>测试5</option>");   //为Select追加一个Option(下拉项)
                    // $("#test").prepend("<option value='0'>测试6</option>");   //为Select插入一个Option(第一个位置)
                });
                return true;
            } else {
                $.modal.alertWarning(data.msg);
                return false;
            }
        }
    });
});

$("#city").change(function () {
    $("#county").empty();
    $("#county").append("<option value=''>请选择县/区</option>");
    var cityId=$("#city").val()
    console.log("城市id========" + cityId)
    if (cityId == '') {
        $.modal.alertWarning('请先选择城市');
        return false;
    }
    $.ajax({
        url:prefix + "/searchCountyList/" + cityId,
        dataType:"json",
        type:"GET",
        success:function (data){
            console.log(data);
            if (data.code == 0) {
                $.each(data.data.countyList, function (infoIndex, info) {  //循环遍历后台传过来的json数据
                    $("#county").append("<option value='" + info["id"] +  "'>" + info["areaName"] + "</option>");
                });
                return true;
            } else {
                $.modal.alertWarning(data.msg);
                return false;
            }
        }
    });
});

提交表单：

若没有选择县一级的，则将cityId传入后端进行保存

function submitHandler() {
 if ($.validate.form()) {
     areaId = $("#county").val();
     if (areaId == '') {
         var areaId = $("#city").val();
         if (areaId == '') {
             $.modal.alertWarning('请选择城市');
             return false;
         }
     }
     var formData = new FormData();
     //其他字段内容
     formData.append('areaId',areaId);

     $.ajax({
         url: prefix + "/add",
         type: 'post',
         cache: false,
         data: formData,
         beforeSend: function () {
             $.modal.loading("正在处理中，请稍后...");
             $.modal.disable();
         },
         processData: false,
         contentType: false,
         dataType: "json",
         success: function(result) {
             $.operate.successCallback(result);
         }
     });
 }
}

修改页面：

实体类加入proviceId，cityId，countyId，数据库无需添加（用作临时保存数据用）

<div class="form-group">
    <label class="col-sm-3 control-label">地区：</label>
    <div class="col-sm-3">
        <select id = "province" name="province" class="form-control m-b">
            <option value="">请选择省份</option>
            <option th:each="dict : ${provinceList}" th:text="${dict.areaName}" th:value="${dict.id}" th:selected="*{provinceId} == ${dict.id}"></option>
        </select>
    </div>
    <div class="form-group" hidden>
        <label class="col-sm-3 control-label">省份id：</label>
        <div class="col-sm-8">
            <input name="provinceId" id="provinceId" th:field="*{provinceId}" class="form-control" type="text">
        </div>
    </div>
    <div class="col-sm-3">
        <select id="city" name="city" class="form-control m-b">
            <option value="">请选择城市</option>
        </select>
    </div>
    <div class="form-group" hidden>
        <label class="col-sm-3 control-label">城市id：</label>
        <div class="col-sm-8">
            <input name="cityId" id="cityId" th:field="*{cityId}" class="form-control" type="text">
        </div>
    </div>
    <div class="col-sm-3">
        <select id = "county" name="county" class="form-control m-b">
            <option value="">请选择县/区</option>
        </select>
    </div>
    <div class="form-group" hidden>
        <label class="col-sm-3 control-label">县/区id：</label>
        <div class="col-sm-8">
            <input name="countyId" id="countyId" th:field="*{countyId}" class="form-control" type="text">
        </div>
    </div>
</div>

页面一加载，即查询地区信息，赋值给下拉框（省一级还是直接从后端传入的）

var provinceId = $("#province").val();
var cityId = $("#cityId").val();
//页面一加载，查询城市和县区列表，传入select选择器
$.ajax({
    url: prefix + "/searchCityList/" + provinceId,
    dataType:"json",
    type:"GET",
    success:function (data){
        console.log(data);
        if (data.code == 0) {
            $.each(data.data.cityList, function (infoIndex, info) {  //循环遍历后台传过来的json数据
                if ($("#cityId").val()==info["id"]) {
                    $("#city").append("<option value='" + info["id"] +  "' selected>" + info["areaName"] + "</option>");
                }
                $("#city").append("<option value='" + info["id"] +  "'>" + info["areaName"] + "</option>");
            });
            $.ajax({
                url:prefix + "/searchCountyList/" + cityId,
                dataType:"json",
                type:"GET",
                success:function (data){
                    console.log(data);
                    if (data.code == 0) {
                        $.each(data.data.countyList, function (infoIndex, info) {  //循环遍历后台传过来的json数据
                            if ($("#countyId").val()==info["id"]) {
                                $("#county").append("<option value='" + info["id"] +  "' selected>" + info["areaName"] + "</option>");
                            }
                            $("#county").append("<option value='" + info["id"] +  "'>" + info["areaName"] + "</option>");
                        });
                        return true;
                    } else {
                        $.modal.alertWarning(data.msg);
                        return false;
                    }
                }
            });
            return true;
        } else {
            $.modal.alertWarning(data.msg);
            return false;
        }
    }
});

城市和县的change()方法同上