提问 发文

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

微微菌

| 2024-07-12 16:59 81 0 0

第一步,先在大屏上准备三个下拉菜单。

第二步,将最左边的下拉菜单的数据修改为下面这种结构:

[
	{
		"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就是当前下拉菜单对应的选项内容。

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

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

收藏 0
分享
分享方式
微信

评论

游客

全部 0条评论

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

开始免费试用 预约演示

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

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

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

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