vue省市区三级联动
下载省市区js并引入
链接: link.
// 引入js
import provice from "./area.js";
data里赋值全局变量
// 赋值
that.provArr = provice.provice;
data(){
provArr: [],
prov: "",
cityArr: [],
city: "",
countryArr: [],
country: "",
}
Html
<!--省份选择-->
<select id="prov" v-model="prov" @change="updateCity();updateDistrict()">
<option v-for="(p,index) in provArr" :key="index">{{p.name}}</option>
</select>
<!--城市选择-->
<select id="city" v-model="city" @change="updateDistrict()">
<option v-for="(c,index) in cityArr" :key="index">{{c.name}}</option>
</select>
<!--县区选择-->
<select id="country" v-model="country">
<option v-for="(c,index) in countryArr" :key="index">{{c}}</option>
</select>
js
//更新市数据
updateCity: function() {
var that = this;
for (let i = 0; i < that.provArr.length; i++) {
if (this.provArr[i].name == that.prov) {
that.cityArr = this.provArr[i].city;
}
}
that.city = that.cityArr[0].name;
},
//更新市数据
updateDistrict: function() {
var that = this;
for (let j = 0; j < that.cityArr.length; j++) {
if (this.cityArr[j].name == that.city) {
that.countryArr = that.cityArr[j].districtAndCounty;
}
}
if (that.countryArr && that.countryArr.length > 0) {
that.country = that.countryArr[0];
} else {
that.country = "";
}
css
select {
width: 2.18rem;
height: 0.7rem;
color: #fff;
font-size: 0.3rem;
border: 0;
background-color: transparent;
outline: none;
}
#prov {
position: absolute;
bottom: 5.4rem;
left: 0.72rem;
}
#city {
position: absolute;
bottom: 5.4rem;
left: 3.22rem;
}
#country {
position: absolute;
bottom: 5.4rem;
left: 5.66rem;
}
样式大家自己根据需求调节哦…大功告成