缩放选择/下拉列表的最佳做法是什么

时间:2014-07-28 14:29:35

标签: javascript jquery html

我有一个很长的列表(长度不确定,可以继续增长)的值。例如:

<select>
  <option value="1">1, some test</option>
  <option value="2">2, some text</option>
  <option value="3">3, some text</option>
  <option value="4">4, some text</option>
  <option ...... add 100 more options> ..
</select> 

支持如此长的列表的最佳实践/用户友好方式是什么?我想用户可能会发现滚动超长列表令人沮丧。 我试图通过在下拉列表的顶部显示最近的值来最小化用户的滚动时间,但是如果她/他想要转到下拉列表中的第一个元素,则需要很多滚动。

由于

3 个答案:

答案 0 :(得分:2)

也许在下拉列表中添加搜索字段? 这样的事情: http://jsearchdropdown.sourceforge.net/

答案 1 :(得分:2)

而不是使用<select>,如何将其更改为HTML5 <datalist>,如下所示:

<datalist id="browsers">
  <option value="Internet Explorer">
  <option value="Firefox">
  <option value="Chrome">
  <option value="Opera">
  <option value="Safari">
</datalist>

顺便说一句,您可以使用<select>键入第一个字母,因此我的建议是根据第一个字母对您的数据进行排序。因为它可以帮助用户直接转到子选项。

答案 2 :(得分:0)

您希望显示哪种数据?也许除选择之外还有另一种方式来显示它们?事实上,对于许多项目,选择并不是最佳选择,除非您使用像 jsearchdropdown 这样的JQuery插件,在这种情况下,用户必须知道他在看什么对