基于若依框架的省市区三级联动

添加页面：
省份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()方法同上