使用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 相关文章推荐
jQuery EasyUI API 中文文档 - ProgressBar 进度条
Sep 29 Javascript
谈谈关于JavaScript 中的 MVC 模式
Apr 11 Javascript
解析js中获得父窗口链接getParent方法以及各种打开窗口的方法
Jun 19 Javascript
jquery判断元素是否隐藏的多种方法
May 06 Javascript
javascript执行环境及作用域详解
May 05 Javascript
jQuery soColorPacker 网页拾色器
Jun 22 Javascript
基于JavaScript实现在新的tab页打开url
Aug 04 Javascript
jQuery自定义图片上传插件实例代码
Apr 04 jQuery
Node.js中你不可不精的Stream(流)
Jun 08 Javascript
node.js连接mysql与基本用法示例
Jan 05 Javascript
基于Vue中使用节流Lodash throttle详解
Oct 30 Javascript
JavaScript封装单向链表的示例代码
Sep 17 Javascript
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
实时抓取YAHOO股票报价的代码
2006/10/09 PHP
php正则校验用户名介绍
2008/07/19 PHP
PHP字符串比较函数strcmp()和strcasecmp()使用总结
2014/11/19 PHP
迁移PHP版本到PHP7
2015/02/06 PHP
php.ini中的request_order推荐设置
2015/05/10 PHP
PHP中Session和Cookie是如何操作的
2015/10/10 PHP
详解WordPress中的头像缓存和代理中的缓存更新方法
2016/03/01 PHP
PHP+Apache+Mysql环境搭建教程
2016/08/01 PHP
php版微信数据统计接口用法示例
2016/10/12 PHP
php实现跨域提交form表单的方法【2种方法】
2016/10/17 PHP
如何利用PHP实现上传图片功能详解
2020/09/24 PHP
潜说js对象和数组
2011/05/25 Javascript
多个$(document).ready()的执行顺序实例分析
2014/07/26 Javascript
JavaScript检测上传文件大小的方法
2015/07/22 Javascript
jQuery实现点击行选中或取消CheckBox的方法
2016/08/01 Javascript
PhotoSwipe异步动态加载图片方法
2016/08/25 Javascript
vue2.0构建单页应用最佳实战
2017/04/01 Javascript
利用JavaScript的%做隔行换色的实例
2017/11/25 Javascript
js技巧之十几行的代码实现vue.watch代码
2018/06/09 Javascript
微信小程序实现两个页面传值的方法分析
2018/12/11 Javascript
vue cli3 配置proxy代理无效的解决
2019/10/30 Javascript
使用Python读写文本文件及编写简单的文本编辑器
2016/03/11 Python
python类:class创建、数据方法属性及访问控制详解
2016/07/25 Python
Python3 利用requests 库进行post携带账号密码请求数据的方法
2018/10/26 Python
python实现五子棋小游戏
2020/03/25 Python
给你一面国旗 教你用python画中国国旗
2019/09/24 Python
Python中断多重循环的几种方式详解
2020/02/10 Python
Django中Q查询及Q()对象 F查询及F()对象用法
2020/07/09 Python
Omio美国:全欧洲低价大巴、火车和航班搜索和比价
2017/11/08 全球购物
美国在线旅行社:Crystal Travel
2018/09/11 全球购物
初级会计求职信范文
2014/02/15 职场文书
运动会主持人开幕词
2016/03/04 职场文书
交通事故协议书范本
2016/03/19 职场文书
2019年预备党员的思想汇报:加深对党的认知
2019/09/25 职场文书
mysql批量新增和存储的方法实例
2021/04/07 MySQL
解决MultipartFile.transferTo(dest) 报FileNotFoundExcep的问题
2021/07/01 Java/Android