This article will use the vue framework to realize the three-level linkage of provinces and cities
1. Ideas
Three drop-down boxes, representing provinces, cities, and districts
The following task is to bind the three drop-down boxes of province, city and district respectively:
Click on the provincial capital to display all the provinces
Click the corresponding province, and the corresponding city will appear in the city drop-down box
Click on the city and all the cities will appear
Click the corresponding city, and the corresponding district will appear in the district drop-down box.
In turn, the three-level linkage of provinces and municipalities can be realized.
Two, vue main body realization
As shown in the following code
<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>3. Improve the code (linkage)
In order to realize the three-level linkage of provinces and municipalities
Monitor the provinces and cities, and change the corresponding provinces, cities and counties when the corresponding data changes, so as to complete the three-level linkage of provinces, cities and counties
The improved Vue is as follows
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);
}
},
})4. All codes
html part
<!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 part (obtained by private chat author)