开源三级联动，Vue.js编写省份、城市、区、县三级联动源码
1.三级联动框样式
上图：
请访问：这里！！ 查看三级联动器效果。
2.如何在html里面引用
文件的目录路径为：
data.js是存放我们中国省、市、区县信息的json格式文件。
需要的可以点击下载：https://download.csdn.net/download/qq_43592352/12374723
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>
