<!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>
28_二级联动
©著作权归作者所有,转载或内容合作请联系作者
- 文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
- 文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
- 文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
推荐阅读更多精彩内容
- 下雨天，在家敲代码很爽哦~~~ 闲话不多说，放效果图： 正文 一、准备 1.第三方库：本Demo用到的第三方库有：...
- 由于项目的需求，需要一个省市的二级联动，本来已经做好了，最后传值的时候发现绑定不成功。当时就郁闷了。最后发现问题出...
- 本节课以非对称性菜单制作为例，详尽讲解Excel联动下拉菜单1级2级3级至多级的制作过程。 例如：对省、市、区划分...
