写一套完整的uniapp省市区三级联动并返回地区code,用json数据
时间: 2023-07-03 07:03:43 浏览: 52
好的,以下是完整的uniapp省市区三级联动并返回地区code的代码,使用的是json数据。
在页面中引入以下组件:
```html
<template>
<view class="content">
<view class="form-item">
<view class="item-label">所在地区</view>
<picker mode="multiSelector" :value="regionIndex" :range="regionList" @change="onChangeRegion">
<view class="picker">{{regionName}}</view>
</picker>
</view>
</view>
</template>
```
在页面中加入以下js代码:
```javascript
<script>
export default {
data() {
return {
// 地区数据
regionList: [],
// 当前选择的地区索引
regionIndex: [0, 0, 0],
// 当前选择的地区名称
regionName: '',
// 当前选择的地区code
regionCode: ''
}
},
mounted() {
this.getRegionData()
},
methods: {
// 获取地区数据
getRegionData() {
let that = this
uni.request({
url: '/static/region.json',
success: (res) => {
that.regionList = res.data
that.regionName = that.regionList[0][0].name + ' ' + that.regionList[1][0].name + ' ' + that.regionList[2][0].name
that.regionCode = that.regionList[2][0].code
}
})
},
// 省市区选择器改变事件
onChangeRegion(e) {
let provinceIndex = e.detail.value[0]
let cityIndex = e.detail.value[1]
let areaIndex = e.detail.value[2]
this.regionIndex = e.detail.value
this.regionName = this.regionList[0][provinceIndex].name + ' ' + this.regionList[1][cityIndex].name + ' ' + this.regionList[2][areaIndex].name
this.regionCode = this.regionList[2][areaIndex].code
}
}
}
</script>
```
其中,`region.json`文件中存储了省市区的数据,格式如下:
```json
[
[
{
"name": "北京市",
"code": "110000"
},
{
"name": "天津市",
"code": "120000"
},
{
"name": "河北省",
"code": "130000"
}
],
[
[
{
"name": "北京市",
"code": "110000"
}
],
[
{
"name": "天津市",
"code": "120000"
}
],
[
{
"name": "石家庄市",
"code": "130100"
},
{
"name": "唐山市",
"code": "130200"
}
]
],
[
[
[
{
"name": "东城区",
"code": "110101"
},
{
"name": "西城区",
"code": "110102"
}
]
],
[
[
{
"name": "和平区",
"code": "120101"
},
{
"name": "河东区",
"code": "120102"
}
]
],
[
[
{
"name": "长安区",
"code": "130102"
},
{
"name": "桥东区",
"code": "130103"
}
],
[
{
"name": "路南区",
"code": "130202"
},
{
"name": "路北区",
"code": "130203"
}
]
]
]
]
```
以上代码实现了一个简单的省市区三级联动,并返回了选择地区的code。