Jquery选项，键盘聚焦隐藏选项

Question

我有一个带有一些选项的选择标签，其中一些选项是隐藏的，另一些则不是。 当我按键盘上的任意键时，焦点也会转到隐藏选项。

示例：

  <select id='myselect'>
    <options id='a'>a</options>
    <options id='b' style ='display:none'>b</options>
    <options id='c'>c</options>
    <options id='b'>b</options>
    </select>

上面我有一个有 4 个选项的选择，现在只有第一个、第三个和第四个选项可见，因为我将第二个选项隐藏起来。

现在，当我从键盘上按“b”时，它会转到隐藏选项，即我必须从键盘上按两次“b”才能到达第四个选项。

谁能告诉我如何解决这个问题？

当我按键盘上的任意键时，焦点应仅考虑非隐藏选项。

Answer 1

使用 HTML，您可以拥有类和 ID，我相信您知道，您可以在一个页面上拥有任意数量的类，但您不能在单个页面上拥有多个 ID，这就是您的问题所在。一个 HTML 页面绝不能有多个 ID。

这样做的原因是因为 ID 用于标识页面上的单个元素（即使它不可见，也不意味着它不存在。

您需要重命名选项 ID，以便它们都不同。

Answer 2

即使所有标签都有唯一的 ID，隐藏的选项也会通过键盘选择。为了避免这种情况，该元素也必须被禁用。

<select id='myselect'>
  <option id='a'>a</option>
  <option id='b' disabled style ='display:none'>b</option>
  <option id='c'>c</option>
  <option id='b2'>b</option>
</select>

在 jquery 1.6+ 中，这可以通过使用 .prop('disabled',false) 来实现，对于较低版本 .attr('disabled','disabled')

我知道这个问题有点老了，但我也遇到过类似的情况，这个问题不断出现......

编辑：
隐藏选项标签似乎只在 Firefox 中有效。为了获得更好的兼容性，应该删除这些选项而不是隐藏它们。