使用vue2实现带地区编号和名称的省市县三级联动效果


Posted in Javascript onNovember 05, 2018

我们知道省市区县都有名称和对应的数字唯一编号,使用编号可以更方便查询以及程序处理,我们今天来了解一下使用vue2来实现常见的省市区下拉联动选择效果。

准备数据源

我们的省市区县的数据源来自本站文章 《基于Vue2的简易的省市区县三级联动组件》 中的districts.js,感谢 v-distpicker 作者。districts.js中的数据格式大概是这样的:

export default {
 100000: {
 110000: '北京市',
 120000: '天津市',
 130000: '河北省',
 140000: '山西省',
 ...
 },
 130000: {
 130100: '石家庄市',
 130200: '唐山市',
 130300: '秦皇岛市',
 130400: '邯郸市',
 ...
 },
 130100: {
 130102: '长安区',
 130104: '桥西区',
 130105: '新华区',
 130107: '井陉矿区',
 ...
 },
 ...
}

很显然,districts.js导出的是一个key:value形式的json数据串,那么在js中我们就可以很方便的处理json数据串中的关系。

构建项目

我们使用vue-cli构建项目,需要安装node和vue环境。然后命令行运行: vue init webpack distpicker 构建好项目工程。具体如何操作的请参照vue官网,这些基础的本文不细讲。

现在我们直接编辑App.vue文件。

<template>
 <div id="app" class="container">
 <div class="demo form-inline">
  <select name="province" class="form-control" v-model="province.code" @change="getCitys">
   <option value="">选择省份</option>
   <option v-for="(item, index) in provinceList"
    :value="index"
    :key="index">
   {{ item }}
   </option>
  </select>
  <select name="city" class="form-control" v-show="showcitys" v-model="city.code" @change="getAreas">
   <option value="">选择城市</option>
   <option v-for="(item, index) in cityList"
    :value="index"
    :key="index">
   {{ item }}
   </option>
  </select>
  <select name="area" class="form-control" v-show="showareas" v-model="area.code" @change="getDistValue">
   <option value="">选择区县</option>
   <option v-for="(item, index) in areaList"
    :value="index"
    :key="index">
   {{ item }}
   </option>
  </select>
  <button class="btn btn-info" @click="getSelectVal">获取选中值</button>
  <div style="margin-top:20px;color:red">{{selected}}</div>
 </div>
 </div>
</template>

这是一个简单三个下拉选择器模板,使用 v-model 可以设置默认值, @change 当下拉选择选项后触发的事件。然后每个 select 下的 option 是读取districts.js对应的数据。

JS代码

我们现在来看JS部分,首先使用import导入省市区县数据,注意我们把districts.js文件放在项目的src目录下,然后定义默认编号100000,因为我们第一个(省级)选择框默认要下拉显示所有的省/自治区/直辖市。然后在 data()部分设置变量。最后把 created()methods 部分的代码加上,完整的代码如下:

import DISTRICTS from './districts';
const DEFAULT_CODE = 100000;
export default {
 name: 'App',
 data() {
  return {
   showcitys: false,
   showareas: false,
   selected: '',
   defaultProvince: '湖南省',
   defaultCity: '长沙市',
   defaultArea: '岳麓区',
   province: {},
   city: {},
   area: {},
   provinceList: [],
   cityList: [],
   areaList: []
  }
 },
 created() {
  this.provinceList = this.getDistricts();
  this.getDefault();
 },
 
 methods: {
  getDefault() {
   if (this.defaultProvince !== '') {
    this.showcitys = true;
    let provinceCode = this.getAreaCode(this.defaultProvince);
    this.cityList = this.getDistricts(provinceCode);
    this.province = {
     code: provinceCode,
     value: this.defaultProvince
    }
   }
   
   if (this.defaultCity !== '') {
    this.showareas = true;
    let cityCode = this.getAreaCode(this.defaultCity);
    this.areaList = this.getDistricts(cityCode);
    this.city = {
     code: cityCode,
     value: this.defaultCity
    }
   }
 
   if (this.defaultArea !== '') {
    let areaCode = this.getAreaCode(this.defaultArea);
    this.area = {
     code: areaCode,
     value: this.defaultArea
    }
   }
  },
  getSelectVal() {
   this.selected = this.province.value + this.city.value + this.area.value;
   console.log(this.province.code + '-'+ this.city.code + '-' + this.area.code);
  },
  
  //名称转代码
  nameToCode(name) {
   for(let x in DISTRICTS) {
   for(let y in DISTRICTS[x]) {
    if(name === DISTRICTS[x][y]) {
    return y
    }
   }
   }
  },
  //获取区域代码
  getAreaCode(value) {
   if(typeof value === 'string') {
   return this.nameToCode(value);
   }

   return value;
  },
  
  getCodeValue(code, level=1) {
   if (level == 1) { //省级
    return DISTRICTS[DEFAULT_CODE][code];
    
   } else if (level == 2) {
    let provinceCode = this.province.code;
    return DISTRICTS[provinceCode][code];
  
   } else { //
    let cityCode = this.city.code;
    return DISTRICTS[cityCode][code];
   }
  },
  getDistricts(code = DEFAULT_CODE) {
   return DISTRICTS[code] || []
  },
  
  cleanList(name) {
   this[name] = []
  },
  getCitys(e) {
   this.cityList = this.getDistricts(e.target.value);

   this.cleanList('areas')
   this.province = this.setData(e.target.value, 1);
   this.areaList = [];
   this.showareas = false;
   this.showcitys = true;
  },
  getAreas (e) {
   this.areaList = this.getDistricts(e.target.value);
   this.city = this.setData(e.target.value, 2);
   this.showareas = true;
  },
  getDistValue (e) {
   this.area = this.setData(e.target.value, 3);
  },
  setData(code, level = 1) {
   code = parseInt(code);
   return {
    code: code,
    value: this.getCodeValue(code, level),
   }
  },

 }
}

运行

我们需要实现的效果是:默认显示省级下拉选择框,下拉选项中应该默认载入省级名称,然后当选择省级下拉框中的省份列表(省级)选项时,显示选中省份的城市列表(市级),然后选择市级城市选项,显示选择城市的区县列表(县级)。在选择完每个选项时,我们应该即时记录选项对应的编号和名称。如果在 data() 部分设置了省市区县的默认值,则三个下拉框都要显示。

运行 npm run dev ,在浏览器中输入http://localhost:8080查看效果。

效果是实现了,但是如果要在一个页面调用多个三级联动效果则就比较尴尬了,下节我给大家讲述如何把这个三级联动效果封装成vue组件,造好轮子,方便在更多地方调用,敬请关注。

总结

以上所述是小编给大家介绍的使用vue2实现带地区编号和名称的省市县三级联动效果,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!

Javascript 相关文章推荐
JavaScript实现拼音排序的方法
Nov 20 Javascript
使用javascript:将其它类型值转换成布尔类型值的解决方法详解
May 07 Javascript
jquery实现文本框数量加减功能的例子分享
May 10 Javascript
移动Web中图片自适应的两种JavaScript解决方法
Jun 18 Javascript
浅谈JavaScript字符串拼接
Jun 25 Javascript
原生js实现网易轮播图效果
Apr 10 Javascript
jQuery实现表格奇偶行显示不同背景色 就这么简单
Mar 13 Javascript
JavaScript运动框架 多值运动(四)
May 18 Javascript
ionic环境配置及问题详解
Jun 27 Javascript
在vue中使用express-mock搭建mock服务的方法
Nov 07 Javascript
详解iview的checkbox多选框全选时校验问题
Jun 10 Javascript
Vue 实现可视化拖拽页面编辑器
Feb 01 Vue.js
vue router的基本使用和配置教程
Nov 05 #Javascript
微信小程序tabbar底部导航
Nov 05 #Javascript
详解webpack+ES6+Sass搭建多页面应用
Nov 05 #Javascript
浅谈vux之x-input使用以及源码解读
Nov 04 #Javascript
小程序实现选择题选择效果
Nov 04 #Javascript
小程序实现单选多选功能
Nov 04 #Javascript
Vuex的基本概念、项目搭建以及入坑点
Nov 04 #Javascript
You might like
php中序列化与反序列化详解
2017/02/13 PHP
php array 转json及java 转换 json数据格式操作示例
2019/11/13 PHP
JavaScript CSS菜单功能 改进版
2008/12/20 Javascript
JavaScript实现页面滚动图片加载(仿lazyload效果)
2011/07/22 Javascript
YUI Compressor压缩JavaScript原理及微优化
2013/01/07 Javascript
JS定时器实例详细分析
2013/10/11 Javascript
js、css、img等浏览器缓存问题的2种解决方案
2013/10/23 Javascript
删除条目时弹出的确认对话框
2014/06/05 Javascript
详解JavaScript的Polymer框架中的通知交互
2015/07/29 Javascript
AngularJS的ng-click传参的方法
2017/06/19 Javascript
vue自定义过滤器创建和使用方法详解
2017/11/06 Javascript
JavaScript作用域链实例详解
2019/01/21 Javascript
javascript中floor使用方法总结
2019/02/02 Javascript
vue.js实现简单的计算器功能
2020/02/22 Javascript
vue实现图片按比例缩放问题操作
2020/08/11 Javascript
python2.7的编码问题与解决方法
2016/10/04 Python
python检查URL是否正常访问的小技巧
2017/02/25 Python
python list是否包含另一个list所有元素的实例
2018/05/04 Python
Python Pillow Image Invert
2019/01/22 Python
基于Python新建用户并产生随机密码过程解析
2019/10/08 Python
Python实现投影法分割图像示例(一)
2020/01/17 Python
Python如何用filter函数筛选数据
2020/03/05 Python
Django ModelForm操作及验证方式
2020/03/30 Python
Python使用itcaht库实现微信自动收发消息功能
2020/07/13 Python
如何通过Python实现RabbitMQ延迟队列
2020/11/28 Python
美国现代家具网站:Design Within Reach
2018/07/19 全球购物
丝芙兰墨西哥官网:Sephora墨西哥
2020/05/30 全球购物
旅游管理本科生求职信
2013/10/14 职场文书
安全生产活动月方案
2014/03/09 职场文书
小学校本培训方案
2014/06/06 职场文书
酒店总经理岗位职责范本
2014/08/08 职场文书
2014财务人员自我评价范文
2014/09/21 职场文书
志愿者服务活动总结报告
2015/05/06 职场文书
2015年初中教务处工作总结
2015/07/21 职场文书
会计专业自荐信范文
2019/05/22 职场文书
CSS巧用渐变实现高级感背景光动画
2021/12/06 HTML / CSS