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

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

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

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

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

注意，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/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

方案四：Ant Design Cascader 级联选择

Ant Design Cascader 级联组件选择省市

关于作者 🌱

我是来自山东烟台的一名开发者，有感兴趣的话题，或者软件开发需求，欢迎加微信 zhongwei 聊聊，或者关注我的个人公众号“大象工具”， 查看更多联系方式