本篇將用，vue框架實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)
一、思路
三個(gè)下拉框，分別代表省、市、區(qū)
下面的任務(wù)就是，分別綁定 省、市、區(qū)三個(gè)下拉框：
點(diǎn)擊省會(huì)出現(xiàn)所有的省份
點(diǎn)擊對(duì)應(yīng)的省份，市下拉框會(huì)對(duì)應(yīng)出現(xiàn)對(duì)應(yīng)的市
點(diǎn)擊市會(huì)出現(xiàn)所有的市
點(diǎn)擊對(duì)應(yīng)的市，區(qū)下拉框會(huì)對(duì)應(yīng)出現(xiàn)對(duì)應(yīng)的區(qū)。
依次可以實(shí)現(xiàn) 省市區(qū)三級(jí)聯(lián)動(dòng)。
二、vue主體實(shí)現(xiàn)
如下面代碼所示
<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>區(qū)</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>三、完善代碼（聯(lián)動(dòng)）
要想實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)
對(duì)?省、市進(jìn)行監(jiān)控，對(duì)應(yīng)的數(shù)據(jù)改變，就改變對(duì)應(yīng)的省市縣，以此來(lái)完成省市縣三級(jí)聯(lián)動(dòng)
完善后的 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部分文章來(lái)源：http://www.zghlxwxcb.cn/news/detail-423976.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>區(qū)</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部分 ( 私聊作者獲取 )文章來(lái)源地址http://www.zghlxwxcb.cn/news/detail-423976.html
到了這里，關(guān)于Vue------實(shí)現(xiàn)省市區(qū)三級(jí)聯(lián)動(dòng)的文章就介紹完了。如果您還想了解更多內(nèi)容，請(qǐng)?jiān)谟疑辖撬阉鱐OY模板網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章，希望大家以后多多支持TOY模板網(wǎng)！
