小白成长日记：写个省市区三级联动

依旧使用vue，不需要关注dom太方便了。
数据来源（台湾缺省）：https://github.com/airyland/c...

完成图

初始化

选完省之后

html部分

<div id="china">
    <select name="province" class="" @change="loadcity($event)">
        <option value="请选择">请选择</option>
        <option :value="index" v-for="(item,index) in province">{{item}}</option>
    </select>
    <select name="city" class="" @change="loadarea($event)">
        <option value="" v-if="!this.city">暂无数据</option>
        <option :value="index" v-for="(item,index) in city" @click="loadarea(index)">{{item}}</option>
    </select>
    <select name="area" class="">
        <option value="" v-if="!this.area">暂无数据</option>
        <option :value="index" v-for="(item,index) in area">{{item}}</option>
    </select>
</div>

一开始的初始状态是省份可以选择，利用v-if来控制市和区的现实选项。当省份未选择时，市区因为没有数据，所以会选择暂无数据。

省份

数据结构如下

"86": {
    "110000": "北京市",
    "120000": "天津市",
    "130000": "河北省",
    "140000": "山西省",
    "150000": "内蒙古自治区",
    "210000": "辽宁省",
    "220000": "吉林省",
    "230000": "黑龙江省",
    "310000": "上海市",
    "320000": "江苏省",
    "330000": "浙江省",
    "340000": "安徽省",
    "350000": "福建省",
    "360000": "江西省",
    "370000": "山东省",
    "410000": "河南省",
    "420000": "湖北省",
    "430000": "湖南省",
    "440000": "广东省",
    "450000": "广西壮族自治区",
    "460000": "海南省",
    "500000": "重庆市",
    "510000": "四川省",
    "520000": "贵州省",
    "530000": "云南省",
    "540000": "西藏自治区",
    "610000": "陕西省",
    "620000": "甘肃省",
    "630000": "青海省",
    "640000": "宁夏回族自治区",
    "650000": "新疆维吾尔自治区",
    "710000": "台湾省",
    "810000": "香港特别行政区",
    "820000": "澳门特别行政区"
  },

直接填充进入即可

市

当省份选中时，触发loadcity()来加载市区的数据，但option无法触发click事件，所以需要监听select才行。
市区数据如下

"320000": {
    "320100": "南京市",
    "320200": "无锡市",
    "320300": "徐州市",
    "320400": "常州市",
    "320500": "苏州市",
    "320600": "南通市",
    "320700": "连云港市",
    "320800": "淮安市",
    "320900": "盐城市",
    "321000": "扬州市",
    "321100": "镇江市",
    "321200": "泰州市",
    "321300": "宿迁市"
  },

代码如下

loadcity(event){
    const num=parseInt(event.target.value)//获取到选中的省份的键，即省份的代码
    if(num){//如果获取到省份的代码
        this.city=chinaData[num]//获取到该省份下市的数据，默认显示的是第一个市
        const area_num=Object.keys(this.city)[0]//因为市已经显示，所以再获取到第一个市的代码，比如这里显示的是南京，通过Object.keys()获取到键
        this.area=chinaData[area_num]//这里获取到第一个市的第一个区
    }else{//如果重新选中了“请选择”，将其他数据清空
        this.city=''
        this.area=''
    }
},

区

数据

"320200": {
    "320205": "锡山区",
    "320206": "惠山区",
    "320211": "滨湖区",
    "320213": "梁溪区",
    "320214": "新吴区",
    "320281": "江阴市",
    "320282": "宜兴市"
  },

代码如下

loadarea(event){
    const num=parseInt(event.target.value)//获取到市的代码
    this.area=chinaData[num]//获取到区的数据
},

源码

https://github.com/yuyeqianxu...
希望能帮助到和我一样的小白朋友们，有bug麻烦反馈，谢谢！