JS 的省市区三级联动选择组件

更新日期: 2019-03-26 阅读次数: 17559 字数: 207 分类: Javascript

由于后台要与小程序前端的城市选择对应起来,所以需要实现一个 JS 的后台省市区三级联动选择组件。

方案一:基于 element-china-area-data 的实现

https://github.com/Plortinus/element-china-area-data

element-china-area-data 是基于 Vue 的 element ui 的一个实现。效果如图:

基于 element-china-area-data 的 backpack 省市区选择组件

注意,github 里只介绍了基于 npm 的实现,如果想使用 CDN 引入的方式实现。

可以参考:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/element-ui@2.6.3/lib/theme-chalk/index.css">
<script src="https://cdn.jsdelivr.net/npm/vue@2.6.8/dist/vue.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-ui@2.6.3/lib/index.js"></script>
<script src="https://cdn.jsdelivr.net/npm/element-china-area-data@4.1.2/dist/app.min.js"></script>

<div id="app">
    <el-cascader
			  size="large"
			  :options="options"
			  v-model="selectedOptions"
			  @change="handleChange">
    </el-cascader>
</div>

<script>
new Vue({
	el: "#app",

	data: {
		options: regionData,
		selectedOptions: []
	},

	mounted: function() {
	},

	methods: {
            handleChange (value) {
                console.log(value);
            }
	}
});
</script>

方案二:手机移动网页版的实现 - Vant 组件

https://youzan.github.io/vant/#/zh-CN/area

方案三:纯 JS 的实现

源码地址:

https://github.com/visugar/FrontEnd-examples

预览地址:

http://visugar.com/FrontEnd-examples/01%E7%9C%81%E5%B8%82%E5%8C%BA%E4%B8%89%E7%BA%A7%E8%81%94%E5%8A%A8/index.html

关于作者

我是来自山东烟台的一名开发者,喜欢瞎折腾,顺便记记笔记。有敢兴趣的话题,欢迎加微信 zhongwei 聊聊。 白天工地搬砖,晚上哄熊孩子,可能回复有点慢,见谅。 查看更多联系方式

相关文章

爱评论不评论

近期节日

2020年02月24日 第三世界青年日
2020年02月24日 龙抬头
2020年02月28日 世界居住条件调查日
2020年03月01日 国际海豹日
2020年03月03日 全国爱耳日
2020年03月05日 学雷锋日
2020年03月05日 惊蛰
2020年03月08日 三八妇女节
2020年03月12日 植树节
2020年03月14日 白色情人节
2020年03月15日 消费者权益日
2020年03月17日 国际航海日
查看更多节日