开源三级联动，Vue.js编写省份、城市、区、县三级联动源码
1.三级联动框样式
上图：
请访问：这里！！ 查看三级联动器效果。
2.如何在html里面引用
文件的目录路径为：
data.js是存放我们中国省、市、区县信息的json格式文件。
3.html代码
<html>
<head>
<script src="vue.js" type="text/javascript"></script>
<script src="data.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="hcq.css"/>
<style>
body{
background: url('bg6.png') no-repeat;
background-size: cover;
height:100%;
}
#app{
width: 700px;
margin: 300px 0 0 400px;
text-align: center;
}
#app select{
width: 200px;
height: 30px;
}
</style>
</head>
<body >
<div id="app">
<select class="hcqbtn hcqbtn-danger" v-model='myprovice' @click="handleChangeCity()">
<option v-for='p in Allprovice' >{{p.name}}</option>
</select>
<select class="hcqbtn hcqbtn-warning" v-model='mycity' @click="handleChangeArea()">
<option v-for='c in Allcity.city'>{{c.name}}</option>
</select>
<select class="hcqbtn hcqbtn-primary">
<option v-for='a in Allarea'>{{a}}</option>
</select>
</div>
</body>
<script>
var app=new Vue({
el:'#app',
data:{
Allprovice:provice,
Allcity:[],
Allarea:[],
myprovice:'',
mycity:''
},
methods: {
handleChangeCity:function(){
var index;
for(var i=0;i<this.Allprovice.length;i++)
{
if(this.myprovice==this.Allprovice[i].name) index=i;
}
this.Allcity=this.Allprovice[index];
console.log(this.Allcity);
},
handleChangeArea:function(){
var index;
for(var i=0;i<this.Allcity.city.length;i++)
{
if(this.mycity==this.Allcity.city[i].name) index=i;
}
this.Allarea=this.Allcity.city[index].districtAndCounty;
console.log(this.Allarea);
}
},
})
</script>
</html>
