省市区三级联动（ssm+vue.js+bootstrap+mysql）

最新推荐文章于 2024-09-10 13:47:16 发布

aline215

最新推荐文章于 2024-09-10 13:47:16 发布

阅读量963

点赞数 2

分类专栏： java mysql 文章标签： java三级联动

本文链接：https://blog.csdn.net/m0_37987151/article/details/91378476

版权

java 同时被 2 个专栏收录

19 篇文章 0 订阅

订阅专栏

mysql

10 篇文章 2 订阅

订阅专栏

1、数据库表

https://download.csdn.net/download/m0_37987151/11233695

2、xml

<select id="queryByParentId" resultType="实体类">
select *
from city_region where region_parent_id = #{value}
</select>

实体类、Dao层跳过

service、serviceImpl层

List<类名> queryByParentId(Object value);

实现方法

@Override
   public List<CityRegionEntity> queryByParentId(Object value) {
       return baseMapper.queryByParentId(value);
   }

controller层

@Autowired
private 实体Service xxservice;

/**
   * 列表
   */
   @RequestMapping("/queryByParentId")
   public R queryByParentId(String parentId){
       if(parentId==null||"".equals(parentId)){
           return R.error("参数为空");
       }
       List<CityRegionEntity> resultList=xxservice.queryByParentId(parentId);
       return R.ok().put("data", resultList);
   }

前端

html

<div class="form-group">
<div class="col-sm-2 control-label">归属地</div>
<div class="col-sm-10" style="display:flex">
<select class="col-xs-4 form-control genusaddr" id="provinceCode4" style="flex: 1" v-model="region4.provinceCode4"
οnchange="vm.onChangeRegion4(event,2)">
<option value="">请选择</option>
<option :value="item.id" v-for="item in provinceList4">{{item.regionName}}</option>
</select>
  
<select class="col-xs-4 form-control genusaddr" id="cityCode4" style="flex: 1" v-model="region4.cityCode4"
οnchange="vm.onChangeRegion4(event,3)">
<option value="">请选择</option>
<option :value="item.id" v-for="item in cityList4">{{item.regionName}}</option>
</select>
  
<select class="col-xs-4 form-control genusaddr" id="areaCode4" style="flex: 1" v-model="region4.areaCode4">
<option value="">请选择</option>
<option :value="item.id" v-for="item in areaList4">{{item.regionName}}</option>
</select>
</div>
</div>

vue.js

var vm = new Vue({
el:'#rrapp',
data:{
showList: true,
title: null,
dept:{
},
//区域
provinceList4: [],
cityList4: [],
areaList4: [],
region4: {
provinceCode4: '',
cityCode4: '',
areaCode4: ''
}
},

methods: {
getRegionInfo4: function (code, type, oldCode) {
$.get(baseURL + "equipment/cityregion/queryByParentId", {parentId: code}, function (r) {
if (r && r.code == 0) {
if (type == 1) {
vm.provinceList4 = r.data;
} else if (type == 2) {
vm.cityList4 = r.data;
setTimeout(function () {
if (oldCode) {
vm.$set(vm.region4, 'cityCode', oldCode);
}
}, 500);
} else {
vm.areaList4 = r.data;
setTimeout(function () {
if (oldCode) {
vm.$set(vm.region4, 'areaCode', oldCode);
}
}, 500);
}
}
});
},
onChangeRegion4: function (ele,type) {
var val=$(ele.target).val();
if(val&&type){
this.getRegionInfo4(val,type);
}else if(type){
if(type==2){
vm.cityList4=[];
vm.areaList4=[];
}else {
vm.areaList4=[];
}
}
if (type == 2) {
vm.region4.cityCode4 = "";
vm.region4.areaCode4 = "";
} else {
vm.region4.areaCode4 = "";
}