28_二级联动
2018-02-12 本文已影响0人
CHENPEIHUANG
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title></title>
</head>
<body>
<div id="app">
<label>省份：</label>
<select @change="changeCity">
<option v-for="d in myProvs" :value="d">{{d}}</option>
</select>
<label>城市：</label>
<select>
<option v-for="d in myCitys" :value="d">{{d}}</option>
</select>
</div>
<script type="text/javascript" src="js/vue.js" ></script>
<script type="text/javascript" src="js/jquery-3.3.1.min.js" ></script>
<script>
var vm=new Vue({
el:"#app",
data:{
myCitys:[], //城市信息
myProvs:[], //省份信息
myData:[]
},
methods:{
changeCity(ev){
//修改城市的数据
console.log(ev.target.value);
this.myCitys=[];
var This=this;
$.each(This.myData,function(index,val){
if(This.myData[index].name==ev.target.value){
//获取指定省份的城市数据
$.each(This.myData[index].city,function(index,val){
This.myCitys.push(val.name);
});
}
});
}
},
created(){
var This=this;
//请求后台数据
$.get('citys.json').then(function(res){
//console.log(res);
//获取省份数据
$.each(res,function(index,val){
This.myProvs.push(val.name);
});
//获取第一个城市数据
$.each(res[0].city,function(index,val){
This.myCitys.push(val.name);
});
This.myData=res;
});
}
})
</script>
</body>
</html>
