Question

我知道很多人每天都在使用计算机，他们不知道如何在HTML选择框/列表中选择多个项目。我不想再在我的页面中使用此控件了：

Please pick 3 options:
<select name="categories" size="10" multiple="yes">

那么你建议用户友好的替代品？也许有10个复选框...或者可能只是让每个选项都在一个彩色块中，当它们点击选择它时会改变颜色？当我认为我目前的20个选项列表最终可能增长到50时，这会变得更加混乱。

无论我选择哪种方式，验证它（使用Javascript）都会很痛苦，以确保此人选择至少1项且不超过3项。这不是要检测他们选择了多少选项，问题是更多关于如何以友好的方式向用户传达这一点！

修改： 我想我可以在stackoverflow上使用标签，但是如果用户是非技术性的（并且其中一半是用户），我觉得这些不太合适。

Answer 1

我过去使用的替代品是：

1）对于少量项目，请使用复选框列表。复选框更加直观且易于使用，但对于大量项目，它可能成为一个问题。但是，当项目数量增加时，您可以添加：

<div style="overflow: scroll" />

固定高度。

2）对于非常大量的项目，很难看到真正选择的内容，尤其是在实际选择的项目很少的情况下。在这种情况下，两个并排的列表可以将项目从一个移动到另一个是更好的方法。

3）当项目数量不是很大但大于几个时，我使用了一个带有内部复选框的下拉列表，其优点是只占用很小的空间。像this这样的东西可能会有所帮助。

Answer 2

我建议使用两个列表框，一个包含可用的列表框，另一个包含选定的列表框。单击或双击其中一个列表中的项目应将该项目移动到另一个列表中。为方便起见，我还包括两个“移动”按钮来做同样的事情。对于Web应用程序以及桌面应用程序中的普通用户来说，这种方法效果非常好。

Answer 3

您可以使用手动的项目列表（Say as simple links），它具有取消选择/手动选择的Javascript onclick行为。基本上通过在两个值之间更改css类，并在提交期间检查这些css（或其他一些属性）来确定选择。

这将允许用户通过单击选择项目，并通过单击取消选择，而不是标准的Ctrl + Click要求。

Answer 4

对于有三次下拉的不频繁用户，可能效果最好＆gt;：

<select><option>Capa Verde</option></select>
<select><option>Holiday</option></select>
<select><option>Competition</option></select>

或者，您可能会在点击后粘贴一系列按钮。然而，要传达最多三个选项的限制将会很困难。

如果需要单独标记每张照片并且类别数量有限，您可以在照片顶部显示一个类别列表（可能在几列中）（显然，您需要确保项目可读并表明他们可以提供点击）并让用户通过单击选择和取消选择标签。它不是非常键盘友好，但是如果没有某种指点设备，它几乎不可能使用网络。在这种情况下，您可以使用空间定位来连接类别和照片。

有两种选择（可用和选择）等等。

你能进行至少一次“走廊”可用性测试吗？

用户术语中的实际任务是什么，用户是谁？

Answer 5

我讨厌多选，特别是以后可以编辑该项目时（如果你点击而没有按住CTRL，你将失去你已经选择的内容）。根据我的经验，最好的两个选择是：

有三个单独的选择选项（如果您限制为三个）。这里的好处是，您可以通过用户体验很好地掌握“选择最多三个”的说明，并且通过一些JavaScript，您可以从第二个下拉列表中删除第一个选项，从而消除混淆。
使用复选框。复选框的好处是它可能更好地匹配您的数据库，而且信息对用户来说非常直观，并且稍微考虑一下您如何呈现用户体验非常可靠的选项。防爆。将复选框分组到有意义的区域。