javascript - 下拉选项 - 使用键盘快捷键选择

Question

我有一个包含数据列的网络应用程序。每列的顶部是一个下拉列表。用户从下拉列表中的选项中进行选择，以对列的其余部分中的数据类型进行分类。大约 60% 的列选择了相同的下拉选项。下拉列表中有大量选项（50+），并且要求保持当前组顺序（经常使用的选项大约在列表的 2/3 下方）。这意味着用户必须向下滚动列表才能选择相同的选项。这会导致用户沮丧以及输入错误的可能性，因为用户的注意力会随着时间的推移而产生疑惑。

我也对其他解决方案持开放态度，但我认为将键盘快捷键分配给一些选项可能会带来更好的体验和最终产品。我会设想用户行为是这样的：

1. 单击列下拉。
2. 按“3”向下移动到第三组选项
3. 使用鼠标从组中进行最终选择

目前用户可以按下一个选项的第一个字母的键，下拉菜单将移动到下一个选项，但是列表中的几个早期选项与 60% 的时间选择的选项具有相同的前几个字母（这在选项列表的下方），所以它没有多大帮助。

示例代码：

<select id="field_run_0_col_3_map_0" data-run="0" data-column="3" data-map="0" class="form-control fieldType" style="min-width:120px;">
                <option value="">Ignore</option>

                <optgroup label="Group 1">

                    <option value="option_1">Option 1</option>
                    <option value="option_2">Option 2</option>
                    <option value="option_3">Option 3</option>
                    
                </optgroup>
                
                <optgroup label="Group 2">

                    <option value="option_4">Option 4</option>
                    <option value="option_5">Option 5</option>
                    <option value="option_6">Option 6</option>
                    <option value="option_7">Option 7</option>


                </optgroup>

                <optgroup label="Group 3">
                    <option value="option_8">Option 8</option>
                    <option value="option_9">Option 9</option>
                    <option value="option_10">Option 10</option>
     
                </optgroup>


            </select>

我查看了其他几篇关于将键盘输入绑定到下拉选项的帖子，但它们似乎都不符合我的要求，而且大多数都已经过时了。

将选项框的值和键作为参数发送？

在 JavaScript 中输入按键事件

https://developer.mozilla.org/en-US/docs/Web/API/KeyboardEvent/code

将选项框的值和键作为参数发送？

Web 应用程序的 JavaScript 键盘快捷键

标签： javascripthtmljqueryforms