省市区三级联动

json数组链接

https://blog-static.cnblogs.com/files/lywya/city.js

//js部分

var province=[],

var city=[],

var area=[]

 

ProvinceSelection(){

var province = test.list()

var prov = $('#province')[0].value

this.province = province

for(var i = 0;i<province.length;i++){

//判断城市

if(province[i].name == prov){

//判断是省还是市

if(province[i].city.length>1){

//清空数组，防止数组叠加

this.city.splice(0,this.city.length);

for(var j=0;j<province[i].city.length;j++){

this.city[j]=province[i].city[j].name

}

}else{

this.city.splice(0,this.city.length);

this.city[0]=province[i].city[0].name

}

}

}

},

SelectionArea(){

var province = test.list()

var prov = $('#province')[0].value

var cityarea = $('#city')[0].value

for(var i= 0;i<province.length;i++){

//判断第一级

if(province[i].name == prov){

for(var j=0; j<province[i].city.length;j++){

//判断第二级

if(province[i].city[j].name == cityarea){

for(var n=0;n<province[i].city[j].area.length;n++){

// this.area.splice(0,this.city.area.length);

this.area[n]=province[i].city[j].area[n]

console.log(this.area[n])

}

}

}

}

}

//我也不知道为啥要再用一次

this.ProvinceSelection();

}

//html部分

li

　　select#province(@click="ProvinceSelection()")

　　　　option(v-for="(item,index) in province" :key="index" :value="item.name" ) {{item.name}}

li

　　select#city(@click="SelectionArea()")

　　　　option(v-for="(item,index) in city" :key="index" :value="item" ) {{item}}

li

　　select

　　　　option(v-for="(test,index) in area" :key="index" :value="test" ) {{test}}