我创建了一些代码，用于在通过箭头键（←/→）导航的选择列表下方的iframe中轻松查看特定项目中的页面集合。很快很明显，列表会很快变得无法控制，所以我创建了另一个选择列表，它可以充当过滤器，这样您就可以在一段时间内查看一个项目。当您从筛选器列表中选择一个项目时，它会向所有其他选择列表选项值（ brilliantly 标题为“none”）添加一个类，这将大大缩短选择列表。
如果你查看下面的代码（从渲染的源视图），你可以看到分配给最后四个项目的“无”类，它们有效地将它们从选择列表中隐藏起来，所以我认为这是一个完成的交易。但是，当您使用箭头键导航到列表时，所有选项仍然有效。使我的问题更加复杂的是我无法提出正确的搜索词来帮助缩小实际问题的范围。
因为代码使用查询字符串值来标识活动项目，所以我无法使用JSBin或CodePen。既然你真的必须看到它在行动以理解我的解释，我把它放在这里：http://nunyabiz.zxq.net/projects/index.html?show=project1
<select id="links" target="main">
<option value="" class="none">---Select Page With Arrow Keys-----</option>
<optgroup label="Project 1" class="projects project1">
<option value="/projects/project1pg1.php" class="projects project1"> project1pg1.php</option>
<option value="/projects/project1pg2.php" class="projects project1"> project1pg2.php</option>
<option value="/projects/project1pg3.php" class="projects project1"> project1pg3.php</option>
</optgroup>
<optgroup label="Project 2" class="projects project2 none">
<option value="/projects/project2pg1.php" class="projects project2 none"> project2pg1.php</option>
<option value="/projects/project2pg2.php" class="projects project2 none"> project2pg2.php</option>
<option value="/projects/project2pg3.php" class="projects project2 none"> project2pg3.php</option>
</optgroup>
我还添加了Bookmarklet的快捷方式，可以让您轻松查看生成的源代码，以防它被证明对任何人都有帮助。提前感谢任何花时间尝试帮助我的人。非常感谢...