Jquery &引用；“隐藏的”；选择通过键盘快捷键奇怪可用的列表选项

我创建了一些代码，可以在一个可通过箭头键导航的选择列表下方的iframe中轻松查看特定项目中的页面集合(← / →). 很快就很明显，列表很快就会变得难以管理，因此我创建了另一个选择列表，用作筛选器，以便您可以一次查看一个项目。当您从筛选器列表中选择一个项目时，它会将一个类添加到所有其他选择列表选项值中（标题为“无”）这将大大缩短选择列表

如果您签出下面的代码（从渲染的源代码视图），您可以看到“无”类分配给最后四个项目，这有效地将它们隐藏在选择列表中，因此我认为这是一笔交易。但是，当您使用箭头键浏览列表时，所有选项仍然有效。使我的问题更加复杂的是，我无法找到正确的搜索词来帮助缩小真正的问题

因为代码使用查询字符串值来标识活动项目，所以我无法让它在JSBin或CodePen上工作。因为您确实需要看到它的实际操作才能理解我的解释，所以我将其放在这里：

---用箭头键选择页面-----
project1pg1.php
project1pg2.php
project1pg3.php
project2pg1.php
project2pg2.php
project2pg3.php

---

我还提供了一个书签的快捷方式，可以让您非常轻松地查看生成的源代码，以防对任何人都有帮助。提前感谢所有花时间尝试帮助我的人。非常感谢……

我的解释是否足够清楚，或者其他人是否也不知道？我也有同样的问题……您找到了解决方案吗解决方案

<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>