正文
vue 选城市三级联动
提示：扫一扫查出行【扫一扫了解最新限行尾号】
复制提示
<div id="example">
<select v-model="prov">
<option v-for="option in arr" :value="option.name">
{{ option.name }}
</option>
</select>
<select v-model="city">
<option v-for="option in cityArr" :value="option.name">
{{ option.name }}
</option>
</select>
<select v-model="district" v-if="district">
<option v-for="option in districtArr" :value="option.name">
{{ option.name }}
</option>
</select>
</div> <script type="text/javascript">
var vm = new Vue({
el: '#example',
data: {
arr: arrAll,
prov: '北京',
city: '北京',
district: '东城区',
cityArr: [],
districtArr: []
},
methods: {
updateCity: function () {
for (var i in this.arr) {
var obj = this.arr[i];
if (obj.name == this.prov) {
this.cityArr = obj.sub;
break;
}
}
this.city = this.cityArr[1].name;
},
updateDistrict: function () {
for (var i in this.cityArr) {
var obj = this.cityArr[i];
if (obj.name == this.city) {
this.districtArr = obj.sub;
break;
}
}
if(this.districtArr && this.districtArr.length > 0 && this.districtArr[1].name) {
this.district = this.districtArr[1].name;
} else {
this.district = '';
}
}
},
beforeMount: function () {
this.updateCity();
this.updateDistrict();
},
watch: {
prov: function () {
this.updateCity();
this.updateDistrict();
},
city: function () {
this.updateDistrict();
}
}
})
</script>
城市json数据量比较大，完整案例请看：
https://codepen.io/zhishaofei3-1471324920/pen/KqdGWa
