提问 发文

多个下拉菜单联动实现级联选择器效果

微微菌

| 2023-12-26 15:27 296 0 0

实现效果:

左中右三个下拉菜单分别用于选取省、市、区选项。当我们选择对应的省份时,中间的下拉菜单选项会自动变成该省对应的市,当选择某个市时,最右边的下拉菜单选项就会自动变成该市对应的区。

实现思路:

1.先在大屏上准备三个下拉菜单。

2.将最左边的下拉菜单的数据修改为下面这种结构:

[
	{
		"s": "1",
		"option": "安徽省",
		"children": [
			{
				"option": "阜阳市",
				"children": []
			}
		]
	},
	{
		"s": "1",
		"option": "浙江省",
		"children": [
			{
				"option": "杭州市",
				"children": [
					{
						"option": "余杭区"
					},
					{
						"option": "拱墅区"
					},
					{
						"option": "江干区"
					},
					{
						"option": "西湖区"
					}
				]
			},
			{
				"option": "温州市",
				"children": [
					{
						"option": "鹿城区"
					},
					{
						"option": "龙湾区"
					},
					{
						"option": "瓯海区"
					},
					{
						"option": "洞头区"
					}
				]
			}
		]
	},
	{
		"s": "1",
		"option": "福建省",
		"children": [
			{
				"option": "福州市",
				"children": [
					{
						"option": "鼓楼区"
					},
					{
						"option": "台江区"
					},
					{
						"option": "仓山区"
					},
					{
						"option": "晋安区"
					},
					{
						"option": "马尾区"
					},
					{
						"option": "长乐区"
					}
				]
			}
		]
	}
]

数据中,每一个children对象都意味着下一个下拉菜单对应的选项内容,如果不存在,则设置为 [],每一个option就是当前下拉菜单对应的选项内容。

3.给省、市下拉菜单添加对应的回调,用于发送children数据。

4.给市、区下拉菜单添加数据过滤器,分别用于接受省、市的children数据。

demo:📎下拉菜单联动_1976710.zip

收藏 0
分享
分享方式
微信

评论

游客

全部 0条评论

10603

文章

10.49W+

人气

19

粉丝

1

关注

官方媒体

轻松设计高效搭建,减少3倍设计改稿与开发运维工作量

开始免费试用 预约演示

扫一扫关注公众号 扫一扫联系客服

©Copyrights 2016-2022 杭州易知微科技有限公司 浙ICP备2021017017号-3 浙公网安备33011002011932号

互联网信息服务业务 合字B2-20220090

400-8505-905 复制
免费试用
微信社区
易知微-数据可视化
微信扫一扫入群