Question

我有一个包含数据列的Web应用程序。每列的顶部是一个下拉列表。用户从下拉菜单中的选项中进行选择，以对其余列中的数据类型进行分类。为大约60％的列选择了相同的下拉选项。下拉列表中有大量选项（超过50个），并且要求保留当前的组顺序（经常使用的选项在列表中大约占2/3）。这意味着用户必须向下滚动列表才能选择相同的选项。随着用户的注意力随着时间的流逝，这会导致用户沮丧以及输入错误的可能性。

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

单击列下拉列表。
按“ 3”可移至第三组选项
使用鼠标从群组中进行最终选择

当前用户可以按选项第一个字母的键，下拉列表将移至下一个选项，但是列表中的多个早期选项的前几个字母与所选选项的前几个字母相同时间（位于选项列表的下方），因此并没有太大帮助。

示例代码：

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

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

Sending both the value and key of an option box as parameters?

Enter key press event in JavaScript

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

Sending both the value and key of an option box as parameters?

JavaScript keyboard shortcuts for web application

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

0 个答案: