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

JerryC 发布于2019-08-21 17:51 / 1177人阅读

摘要：数据来源台湾缺省完成图初始化选完省之后部分请选择请选择暂无数据暂无数据一开始的初始状态是省份可以选择，利用来控制市和区的现实选项。当省份未选择时，市区因为没有数据，所以会选择暂无数据。

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

完成图 初始化

选完省之后

html部分

一开始的初始状态是省份可以选择，利用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麻烦反馈，谢谢！

云服务器专线服务省市三级联动陕西 js省市县三级联动省市联动省市多级联动

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/90106.html

小白成长日记：写个贪吃蛇

摘要：贪吃蛇并不是通过操作来完成移动的，而是通过记录贪吃蛇的路径来将身体渲染出来。目前没有内置的操作符判断对象的内容是否相同。还是用的vue，本来以为不合适，但想法错了。贪吃蛇并不是通过操作dom来完成移动的，而是通过记录贪吃蛇的路径来将身体渲染出来。一般移动元素，我们都是变动它的css达到目的，但我在写贪吃蛇的时候发现这样很难以实现，参考了网上的资源，发现大部分人是通过记录贪吃蛇的路径...

archieyang 2019-08-21 17:55 评论0 收藏0
小白成长日记：写个日历

摘要：一周有天，返回的数，如果上月最后一天是星期二，看下的日历是补了三天，我们得到的是，所以为此，之后就是填充最后一天，用处理一下再排序，上一个月的数据就得到了。每天进步一点点。写个简单的小日历，依旧用vue，方便完成图 showImg(https://segmentfault.com/img/bVZoWs?w=416&h=495); 思路本月的天数截取上月的天数截取下月天数今...

muzhuyu 2019-08-21 17:50 评论0 收藏0
小白成长日记：一步一步写个轮播图插件

摘要：并不是所有人写的代码或者插件都适合小白使用，比如这是一个的滚动插件，大多数人使用了之后发现滚动不了，去作者提，其实是他们并不懂滚动的原理。最近在这里看了一篇关于面试的文章《回顾自己三次失败的面试经历》，作者三次倒在了轮播图上。囧，所以我也写个轮播图看看。这次是用jQuery写的，因为最近一直在研究jQuery插件的写法，所以用jQuery写的，而且我发现，我vue用太多，完全不熟悉d...

notebin 2019-08-22 11:15 评论0 收藏0
使用vue+element ui 实现省市区三级联动

摘要：使用实现省市区三级联动开发工具使用技术效果图如下话不多说上代码一，页面部分二，部分首先引入以下代码注意引入上方代码之前需先运行下方代码进行安装然后再写入以下代码这样一个省市区三级联动的下拉列表就完成了 ...

netScorpion 2021-11-11 16:54 评论0 收藏0
Ajax-省市区三级联动

摘要：三级联动此例在框架中实现创建数据地区编号上级名称在文件夹创建静态页面省市区三级联动省请选择市请选择区请选择省，市，区三级联动显示市请选择请选择省，市，区三级联动显示地区请选择创建控制器查询获取三级联动：此例在ThinkPHP3.2框架中实现 1.创建数据 DROP TABLE IF EXISTS `region`; CREATE TABLE `region` ( `id` in...

jsummer 2019-07-01 14:19 评论0 收藏0