使用 <ul><li> 而不是 <select> 进行导航/过滤

【问题标题】：Using <ul><li> instead of <select> for Navigation/Filtering使用 <ul><li> 而不是 <select> 进行导航/过滤
【发布时间】：2018-03-06 16:09:25
【问题描述】：

我正在对当前使用<select> 的网站进行“现代化改造”，以允许用户选择要显示的“类别”。一个人为的例子：

<select>
    <option value="/Sales/1">Computers</option>
    <option value="/Sales/2">TVs</option>
    <option value="/Sales/3">Fidget Spinners</option>
</select>

那么当然是使用 javascript 来导航到选定的值。如果未启用 javascript，您可以使用后备 <submit> 按钮。

第一次加载页面时，默认选择第一项（期望行为）。回发后，<select> 可以（确实）显示当前选择的<option>（也是所需的行为）。

我对它的工作原理没有任何疑问。它完全可用并且符合要求。我唯一的缺点是您几乎无法控制<select> 在移动浏览器中的呈现方式。然后是HTML purists who insist that <select> shouldn't be used for navigation（无意冒犯）。 （起初我认为我没有将它用于导航，更多地用作过滤器，但该网站上的示例图像显示有人选择了一个类别，这或多或少是我正在做的）。 em>

所以这里的终极问题是：

1) 我应该继续使用<select>吗？还是为了“标准”和对外观的额外控制，使用<ul><li> 实现？

2) 如果我要使用<ul><li>，我该怎么做？我可以看到如何使用 CSS 来显示/隐藏列表项，但是复制折叠时显示“选定”项的行为似乎要复杂得多，当列表显示。搜索了高和低，找不到任何这样做的东西。有什么例子或想法吗？

PS 可能值得注意的是，选项/项目从大约 10 个到 100 个左右不等。而且，不，有一个文本框来指定或搜索选项是不可行的（或可取的）。

【问题讨论】：

• 如果它只是“链接”到另一个页面，那么为什么不在你的 li 中放置一个锚点呢？
• 从技术上讲，它不是一个不同的页面，只是提供不同的路由参数来显示所选类别。但是是的，如果我要走
• 路线，那么是的，它会包含一个 。我得到了那部分，但不确定如何模仿 的行为，即在折叠时显示选定内容以及在展开时自动“滚动”到选定内容。