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

更新日期: 2023-02-28 阅读次数: 42859 字数: 235 分类: 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/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 聊聊, 查看更多联系方式