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

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

基于若依框架的省市区三级联动相关推荐

基于layui的省市区三级联动（数据交互）
项目中用到了省市区三级联动的一个效果于是借助layui的下拉框和回调,用ajax请求完成动态的省市区三级联动话不多说上代码 html代码: <div class="labcon l ...
php省城联动_thinkPHP实现的省市区三级联动功能示例
本文实例讲述了thinkPHP实现的省市区三级联动功能.分享给大家供大家参考,具体如下: 一张表实现省市区三级联动[3409条数据] 1. php代码: public function index() ...
PHP三级联动视频教程,PHP教程：thinkPHP实现的省市区三级联动功能示例
<PHP教程:thinkPHP实现的省市区三级联动功能示例>要点: 本文介绍了PHP教程:thinkPHP实现的省市区三级联动功能示例,希望对您有用.如果有疑问,可以联系我们. 本文实例讲 ...
element vue 获取select 的label_vue+elementui实现省市区三级联动
老大喊你起来营业了醒醒,打工人!开始工作了,今天讲讲我的踩坑记录吧! 这次我们用的是vue-admin-webapp,基于 vue 和 element-ui 采用了最新的前端技术栈来开发一个管理系统 ...
支付宝小程序使用uView实现省市区三级联动的后续
上一篇讲的是使用uView2.0实现省市区三级联动(CSDN),最后无疾而终这次我打算一雪前耻,使用uVIew1.0版本. 很好支持支付宝小程序,然后我按照官网的步骤一顿操作.. hbuilderX ...
一款超好的省市区三级联动插件citypicher的使用（数据分从数据库获取或从js文件获取）
有兴趣的小伙伴,可以继续阅读小编下一篇博客微服务概述添加链接描述一篇对SpringCloud的介绍添加链接描述 SpringCloud核心组件详述添加链接描述一篇对MySQL语句执行顺序的介绍添 ...
laraveladmin省市区三级联动
Distpicker是一个中国省市区三级联动选择组件,这个包是基于Distpicker的laravel-admin扩展,用来将Distpicker集成进laravel-admin的表单中安装 com ...
省市区三级联动查询（含地区表sql）
地区sql文件在我上传的资源中sys_region.sql,直接导入数据库即可,大家放心不需要积分的哟! 地区资源下载地址,冲! Controller /*** <p>* 省市区三级联动* ...
【Android笔记】使用v5.2.2最新版CityPickerView实现省市区三级联动选择
目录 1. CityPickerView开源框架简介 2. CityPickerView在Android程序中的使用 2.1 build.gradle(Module:app)添加依赖 2.1.1 安装 ...

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

基于若依框架的省市区三级联动相关推荐

最新文章

热门文章