<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>省市区三级联动</title>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
</head>
<body>
<div id="app">
<select v-model="province" @change="provinceChange">
<option value="" disabled>请选择</option>
<option v-for="item in provinceList" :value="item">{{item.name}}</option>
</select>
<select v-model="city" @change="cityChange">
<option value="" disabled>请选择</option>
<option v-for="item in cityList" :value="item">{{item.name}}</option>
</select>
<select v-model="area">
<option value="" disabled>请选择</option>
<option v-for="item in areaList" :value="item">{{item}}</option>
</select>
<div>
{{province.name}}---{{city.name}}---{{area}}
</div>
</div>
<script>
let list = [
{
name:"江苏省",
cityList:[
{
name:"南京市",
areaList:[
"江宁区",
"玄武区"
]
},
{
name:"苏州市",
areaList:[
"姑苏区",
"吴中区"
]
}
]
},
{
name:"浙江省",
cityList:[
{
name:"杭州市",
areaList:[
"滨江区",
"西湖区"
]
},
{
name:"嘉兴市",
areaList:[
"粽子区",
"西区"
]
}
]
}
];
let app = new Vue({
el:"#app",
data:{
province:"",
city:"",
area:"",
provinceList:list,
cityList:[],
areaList:[]
},
methods:{
provinceChange(){
this.cityList = this.province.cityList;
this.city = this.cityList[0];
this.areaList = this.cityList[0].areaList;
this.area = this.cityList[0].areaList[0];
},
cityChange(){
this.areaList = this.city.areaList;
this.area = this.areaList[0];
}
}
});
</script>
</body>
</html>
3108
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
