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

更新日期: 2019-03-26 阅读次数: 13253 字数: 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

爱评论不评论

近期节日

2019年09月20日 国际爱牙日
2019年09月21日 国际和平日
2019年09月22日 世界无车日
2019年09月23日 秋分
2019年09月23日 国际聋人节
2019年09月27日 世界旅游日
2019年10月01日 国庆节
2019年10月04日 世界动物日
2019年10月07日 重阳节
2019年10月08日 寒露
2019年10月09日 世界邮政日
2019年10月10日 辛亥革命纪念日
查看更多节日