html - 许多人不知道如何在 HTML <select> 控件中多选项目，所以......？

Question

我认识很多每天使用电脑的人，他们不知道如何在 HTML 选择框/列表中选择多个项目。我不想再在我的页面中使用此控件:

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

那么您建议使用哪些用户友好的替代方案？也许有 10 个复选框……或者可能只是将每个选项都放在一个彩色 block 中，当他们单击选择它时颜色会改变？当我考虑到我当前的 20 个选项列表最终可能会增加到 50 个时，这就变得更加困惑了。

无论我选择哪种方式，验证它(使用 Javascript)都会很痛苦，以确保人们选择至少 1 个项目而不超过 3 个。这不是检测他们选择了多少选项，问题是更多关于如何以友好的方式将其传达给用户的信息!

编辑: 我想我可以使用标签，就像 stackoverflow 上的这里一样，但我觉得如果用户不是技术人员(其中一半是技术人员)，这些标签不太合适。

Answer 1

我过去使用的替代方案是:

1) 对于少量项目，使用复选框列表。 复选框更加直观且易于使用，但对于大量项目而言，这可能会成为一个问题。不过，当项目数量增加时，您可以添加:

<div style="overflow: scroll" />

固定高度。

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

3)当项目的数量不是很多但多于几个时，我使用内部构建的带有复选框的下拉列表，其优点是只占用很小的空间。类似于 this可能会有帮助。