使用<ul> <li>代替<select>进行导航/过滤

Question

我正在“现代化”一个当前使用＆lt; select＆gt;的网站。允许用户选择要显示的“类别”。一个人为的例子： ＆LT;选择＆GT;     ＆lt; option value =“/ Sales / 1”＆gt; Computers＆lt; / option＆gt;     ＆lt; option value =“/ Sales / 2”＆gt; TV＆lt; / option＆gt;     ＆lt; option value =“/ Sales / 3”＆gt; Fidget Spinners＆lt; / option＆gt; ＆LT; /选择＆GT; 然后，当然javascript用于导航到选定的值。你可以有一个后备＆lt; submit＆gt;按钮如果未启用javascript。 首次加载页面时，默认情况下会选择第一个项目（所需行为）。回发后，然后＆lt; select＆gt;可以（确实）显示当前选择的＆lt;选项＆gt; （也是期望的行为）。 我对这是如何工作的确没有问题。它非常实用，符合要求。我唯一的缺点是你无法控制＆lt; select＆gt;的方式。在移动浏览器中呈现。然后，有HTML纯粹主义者坚持＆lt; select＆gt;不应该用于导航（没有冒犯）。 （起初我认为我没有使用它进行导航，更多的是用作过滤器，但该网站上的示例图像显示有人选择了一个类别，这或多或少是我正在做的事情）。 所以最终的问题是： 1）我应该继续使用＆lt; select＆gt ;?或者为了“标准”和对外观的额外控制，使用＆lt; ul＆gt;＆lt; li＆gt;实施？ 2）如果我使用＆lt; ul＆gt;＆lt; li＆gt;，我该如何使用？我可以看到如何使用CSS来显示/隐藏列表项，但似乎复制在折叠时显示“选定”项目的行为会更加复杂，并且当自动处于选定项目时列表显示。搜索高低，找不到任何有用的东西。任何例子或想法？ PS可能值得注意的是，选项/项目的变​​化范围从大约10到大约100左右。而且，不，有一个文本框来指定或搜索选项是不可行的（或不可取的）。

Answer 1

您可以使用以下某些库设置样式：https://silviomoreto.github.io/bootstrap-select/examples/ 你将保留所有默认功能，还有更多功能：）