用于大型数据集的单个<select multiple=“multiple”>

我的建议是不要使用通用的多选控件。在我的整个职业生涯中,我一直在运行用户体验研究,每当我用多个选择控件测试一个站点时,它总是会给最终用户带来问题。

我以前在这上面写过一篇文章: Multiple Select Controls Must Evolve or Die

不过,听起来你也知道这一点。你真正的问题是“我用什么来代替?”好吧,要回答这个问题,你必须弄清楚用户的任务是否倾向于 回忆 或 识别 .

(i)召回 ,我的意思是用户在看到列表之前就知道他们想要选择什么。在这种情况下,如果您提供一个自动完成工具(例如,在Facebook上非常有效地使用),对他们来说可能是最简单的。当选项列表也不可能长到出现在页面上(例如位置名称等)时,此解决方案甚至更好。

(二)继续承认 -我指的是一个让用户在看到选项列表之前不知道自己想要选择什么的任务。在这种情况下,自动完成不会给他们任何提示。一系列的复选框会更有帮助。如果您可以一次显示全部内容,这对用户很有帮助。滚动分区更紧凑,但是它们为用户创建了一个内存负载——也就是说,一旦它们向下滚动,就必须记住它们选择的项目。这在用户保存表单并稍后返回表单时尤其明显。

所以-想想你的问题,你需要一个召回或识别的解决方案吗?

不幸的是,我不能向您指出任何案例研究,但我可以告诉您的是,我个人更喜欢两到五列布局中的大型复选框数组。当然,它们占用了很大的空间,但是它们非常精确而且简单。

我认为 任何 控制——无论是基本的多选择、双列表、复选框数组还是其他任何解决方案——一旦您超过了某个项目的阈值,无论什么,它都会对用户构成挑战。

看一看 Dojo Toolkit's DataGrid 控制。它是迄今为止最灵活和最强大的,支持多行选择。它还内置了辅助功能。

extjs库为您的问题提供了一些非常好的解决方案。有许多用户扩展,用于整洁的O组合框和多选择框。

如果需要组合选择列表,可以添加查询搜索和分页,并使用简单模板设计结果下拉列表,如本例中所示:

http://extjs.com/deploy/dev/examples/form/forum-search.html

这是一个不错的多重选择,你似乎描述的风格:

*(主站点)/学习/扩展:多选择2

您可以在此处找到所有用户扩展:

*(主站点)/学习/扩展

另外,您可以很容易地将它包含到现有的网页中,而不需要额外的开销。ExtJS的整个堆栈相当大,但是为了只获取您需要的JS文件,它们提供了一个很好的构建工具,可以只获取您需要的那些部分:

*(主站点)/产品/扩展/构建/

只是警告:extjs刚刚发布了3.0,但我不确定用户扩展是否已经升级。“论坛搜索”是从一个3.0的例子中提取的,所以它可以与最新的和最好的一起工作。

(*)显然,新用户只能发布一个链接…