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

易知微创新技术团队

| 2024-09-04 14:04 78 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": "长乐区"          }        ]      }    ]  }]