本篇将用，vue框架实现省市区三级联动
一、思路
三个下拉框，分别代表省、市、区
下面的任务就是，分别绑定 省、市、区三个下拉框：
点击省会出现所有的省份
点击对应的省份，市下拉框会对应出现对应的市
点击市会出现所有的市
点击对应的市，区下拉框会对应出现对应的区。
依次可以实现 省市区三级联动。
二、vue主体实现
如下面代码所示
<body>
<div id="app">
<div>
<span>省</span>
<select v-model="pro">
<option :value="p.adcode" v-for="p in list">{{p.name}}</option>
</select>
<span>市</span>
<select v-model="city">
<option :value="item.adcode" v-for="(item,index) in list.find(c=>c.adcode==pro).districts">
{{item.name}}
</option>
</select>
<span>区</span>
<select v-model="county">
<option :value="item.adcode"
v-for="(item,index) in list.find(c=>c.adcode==pro).districts.find(x=>x.adcode==city).districts">
{{item.name}}
</option>
</select>
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
pro: "110000",
city: "",
county: "",
list: citys
},
})
</script>
</body>
三、完善代码（联动）
要想实现省市区三级联动
对 省、市进行监控，对应的数据改变，就改变对应的省市县，以此来完成省市县三级联动
完善后的 Vue 如下
new Vue({
el: "#app",
data: {
pro: "110000",
city: "",
county: "",
list: citys
},
methods: {
loadCity(proCode) {
let $citys = this.list.find(s => s.adcode == proCode).districts[0];
if ($citys != null) {
this.city = $citys.adcode;
}
},
loadCounty(proCode, cityCode) {
let $county = this.list.find(s => s.adcode == proCode).districts.find(x => x.adcode == cityCode).districts[0];
if ($county != null) {
this.county = $county.adcode;
}
}
},
created() {
this.loadCity(this.pro);
this.loadCounty(this.pro, this.city);
},
watch: {
pro: function (newVal, oldVal) {
this.loadCity(newVal);
},
city: function (newVal, oldVal) {
this.loadCounty(this.pro, this.city);
}
},
})
四、全部代码
html部分
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="../js/vue.js"></script>
<script src="../js/citys.js"></script>
<script>
console.log(citys)
</script>
<style>
select{
width: 188px;
height: 20px;
text-align: center;
border-radius: 20px;
}
</style>
</head>
<body>
<div id="app">
<div>
<span>省</span>
<select v-model="pro">
<option :value="p.adcode" v-for="p in list">{{p.name}}</option>
</select>
<span>市</span>
<select v-model="city">
<option :value="item.adcode" v-for="(item,index) in list.find(c=>c.adcode==pro).districts">
{{item.name}}
</option>
</select>
<span>区</span>
<select v-model="county">
<option :value="item.adcode"
v-for="(item,index) in list.find(c=>c.adcode==pro).districts.find(x=>x.adcode==city).districts">
{{item.name}}
</option>
</select>
</div>
</div>
<script>
new Vue({
el: "#app",
data: {
pro: "110000",
city: "",
county: "",
list: citys
},
methods: {
loadCity(proCode) {
let $citys = this.list.find(s => s.adcode == proCode).districts[0];
if ($citys != null) {
this.city = $citys.adcode;
}
},
loadCounty(proCode, cityCode) {
let $county = this.list.find(s => s.adcode == proCode).districts.find(x => x.adcode == cityCode).districts[0];
if ($county != null) {
this.county = $county.adcode;
}
}
},
created() {
this.loadCity(this.pro);
this.loadCounty(this.pro, this.city);
},
watch: {
pro: function (newVal, oldVal) {
this.loadCity(newVal);
},
city: function (newVal, oldVal) {
this.loadCounty(this.pro, this.city);
}
},
})
</script>
</body>
</html>
js部分 ( 私聊作者获取 )
本文转载自: https://blog.csdn.net/weixin_52953038/article/details/126555237
版权归原作者 阳阳大菜 所有， 如有侵权，请联系我们删除。
版权归原作者 阳阳大菜 所有， 如有侵权，请联系我们删除。