许多人不知道如何在 HTML
我认识很多每天使用计算机的人，他们不知道如何在 HTML 选择框/列表中选择多个项目。 我不想再在我的页面中使用此控件：
Please pick 3 options:
<select name="categories" size="10" multiple="yes">
那么您建议使用哪些用户友好的替代方案？ 也许有 10 个复选框...或者也许只是将每个选项放在一个彩色块中，当他们单击选择它时，它会改变颜色？ 当我考虑到我当前的 20 个选项列表最终可能会增加到 50 个时，情况会变得更加混乱。
无论我选择哪种方式，验证它（使用 JavaScript）都会很痛苦，以确保人们选择至少 1 个项目而不超过 3 个。这不是检测他们选择了多少个选项，问题更多的是如何选择以友好的方式向用户传达这一点！
编辑： 我想我可以使用标签，就像 stackoverflow 上的标签一样，但我觉得如果用户是非技术人员（其中一半是非技术人员），那么这些标签不太合适。
I know many people who use computers every day, who do not know how to select multiple items in a HTML select box/list. I don't want to use this control in my pages any more:
Please pick 3 options:
<select name="categories" size="10" multiple="yes">
So what user-friendly alternatives do you suggest? Perhaps have 10 tickboxes...or maybe just have each option in a coloured block which changes colour when they click to choose it? This gets messier when I consider my current list of 20 options might grow to 50 eventually.
Whatever way I pick it's gonna be a pain to validate it (using Javascript), to make sure the person picks at least 1 item and not more than 3. It's not about detecting how many options they have picked, the problem is more about how to convey this to the user in a friendly way!
Edit:
I suppose I could use tags, like right here on stackoverflow, but I feel these are less appropriate if the users are non-technical (and half of them will be).
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（5）
我过去使用的替代方案是：
1）对于少量项目，使用复选框列表。
复选框更加直观且易于使用，但对于大量项目来说，它可能会成为一个问题。 不过，当项目数量不断增加时，您可以添加
具有固定高度的：。
2）对于大量的项目，很难看出真正选择的是什么，特别是当实际选择的项目很少时。 在这种情况下，两个并排的列表并且可以将项目从一个列表移动到另一个列表是一种更好的方法。
3）当项目数量不是很大但大于几个时，我使用内部构建的带有复选框的下拉菜单，其优点是仅占用很小的空间。 像这样之类的内容可能会有所帮助。
Alternatives I used in past are:
1) For small number of items use a checkbox list.
The checkboxes are much more intuitive and simple to use, but for large number of items it can became an issue. Still, when the number of items is growing you can add a:
with a fixed height.
2) For very large number of items it becomes difficult to see what is really selected especially when there are few items actually selected. In this case two lists side by side with the possibility to move items from one to another is a much better approach.
3) When the number of items is not very big but greater than a few, I used a dropdown with checkboxes build in-house that has the advantage of occupying only a small space. Something like this might be of help.
我建议使用两个列表框，一个包含可用列表框，另一个包含选定列表框。 单击或双击其中一个列表中的某个项目应将该项目移动到另一个列表中。 为了方便起见，我还添加了两个“移动”按钮来执行相同的操作。 无论是在 Web 应用程序还是桌面应用程序中，这种方法对于普通用户来说都非常有效。
I suggest using two list boxes, one with the available ones, and one with the selected ones. Clicking or double-clicking an item in one of the lists should move the item into the other list. For convenience, I'd also include two "Move" buttons to do the same. This approach works surprisingly well with average users, in web applications as well as desktop applications.
您可以只使用手动项目列表（例如简单链接），这些项目具有手动取消选择/选择的 Javascript onclick 行为。 基本上通过更改两个值之间的 css 类，并在提交期间检查这些 css （或其他一些属性）来确定选择。
这将允许用户简单地通过单击选择一个项目，并通过单击取消选择，而不是标准的 Ctrl+单击要求。
You could just use a manual list of items (Say as simple links), that have Javascript onclick behavior that deselects/selects manually. Basically by changing the css class between two values, and checking these css (Or some other attribute) during submission to determine the selections.
This would allow the user to simply select an item by clicking, and deselect by clicking, rather than the standard Ctrl+Click requirement.
对于不常使用的用户来说，拥有三个下拉列表可能效果最好>：
或者，您可能拥有一系列单击后会粘住的按钮。 然而，要传达最多三个选项的限制将会很困难。
如果需要单独标记每张照片并且类别数量有限，您可以在照片顶部显示类别列表（可能在几列中）（显然您需要确保这些项目可读）并表明它们可以点击）并让用户通过单击选择和取消选择标签。 它对键盘不太友好，但是如果没有某种指点设备，几乎不可能使用网络。 在这种情况下，您将使用空间定位来连接类别和照片。
有两堆（可用和选定）的各种选项等。
您至少可以进行“走廊”可用性测试吗？
用户方面的实际任务是什么以及用户是谁？
For unfrequent users having three drop downs might work the best>:
Alternatively, you might have a range of buttons that stick once clicked. However it is going to be difficult then to convey the limitation of up to three options.
If it is needed to mark each photograph individually and there is a limited number of categories you could display a list of categories (may be in several columns) right on top of the photograph (obviously you'd need to make sure the items a readable and indicate that they afford clicking) and let users select and de-select the tags by a single click. It is not very keyboard friendly, however its mostly impossible to use web without some sort of pointing device. In this case you'd use spacial positioning to connect categories and photographs.
There are various options with two piles (available and selected) etc.
Can you do at least a "hallway" usability testing?
What is the actual task in user terms and who are the users?
我讨厌多选，尤其是当该项目稍后可以编辑时（如果您在不按住 CTRL 的情况下单击，则会丢失已选择的内容）。 根据我的经验，最好的两个选项是：
I hate multi-select, especially when the item can later be edited (if you click without holding CTRL, you lose what you already had selected). The best two options in my experience are: