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

微微菌

| 2023-12-26 15:27 97 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数据。