css 如何添加下拉列表功能？

qgelzfjb 于 2022-11-19 发布在其他

关注(0)|答案(1)|浏览(143)

我已经创建了包含一些国家/地区数据的列表（按子区域分组，每个国家/地区包含以下数据：名称、首都、人口和区域）。现在我想添加隐藏或显示属于其子区域的所有国家的功能。例如，单击子区域北美后，属于NA的所有国家都将显示出来。或者隐藏，如果他们已经显示了。现在我所能做的就是显示整个列表的次区域与其所有的国家，我不知道如何添加下拉的能力。我将非常感激你的帮助。
下面是我所能做的源代码。
第一个
第二件事，但不像第一件事那么重要，我还需要添加排序和过滤功能，在单击最顶部的div元素后，每列都要进行排序和过滤。因此，例如，在单击AREA后，在标题部分，国家应按其区域进行排序。过滤选项允许仅显示以字母'A'开头的国家。

css

来源：https://stackoverflow.com/questions/74445099/how-to-add-ability-to-dropdown-for-list

1条答案

按热度按时间

zvokhttg1#

您可以先将子面域分组，例如，

const subRegions = data.reduce((r, a) => {
    r[a.subregion] = r[a.subregion] || [];
    r[a.subregion].push(a);
    return r;
}, {});

然后创建一个select元素并分别注入text和value。
然后处理onchange并获取选定的子区域数据，而不是像subRegions[subRegionName]那样一次获取所有数据。

分叉示例：

第一个

更新日期：

这是更新后的版本，每个子区域都被分组为一个可折叠的区域，在切换时，子区域下的各个国家/地区都被显示出来。
第一个

赞(0）回复(0）举报 2022-11-19

我来回答

css 如何添加下拉列表功能？

1条答案

相关问题

热门标签

最新问答