省份城市联动过滤失效？解决办法在此！

javascript

2024-03-23 07:00:49

如何根据省份过滤城市

问题：省份和城市下拉列表联动过滤失效

在许多网络应用程序中，需要实现根据省份过滤城市的功能。但是，在一些情况下，这个功能可能失效，导致城市下拉列表中仍然显示与所选省份不匹配的城市。

解决方案：过滤数据并更新城市下拉列表

要解决这个问题，需要对代码进行以下修改：

过滤数据： 在处理省份下拉列表选择事件的函数中，过滤数据以筛选出与所选省份匹配的城市。
更新城市下拉列表： 使用过滤后的城市数据更新城市下拉列表中的选项。

代码修改：

1. 过滤数据

const handleDropdownFilterProvince = (e: React.ChangeEvent<HTMLSelectElement>) => {
  ...
  // 过滤数据，筛选出与所选省份匹配的城市
  const filteredCitiesSet = new Set(
    filteredData.filter((item) => item.state === e.target.value).map((item) => item.city)
  );

  const filteredCities = Array.from(filteredCitiesSet);
  ...
};

2. 更新城市下拉列表

const Dropdown: React.FC<DropdownProps> = ({
  data,
  onChange,
  value,
  filterType,
}) => {
  ...
  // 根据 filteredCities 状态更新城市下拉列表选项
  const filteredOptions = filteredData.filter((i) => {
    ...
    if (filterType === "city") {
      // 确定在城市下拉列表中显示的城市
      return filteredCities.includes(i.city);
    }
    ...
  });
  ...
};