用户界面：多项选择框
我有一个表单，用户可以在其中选择选择菜单中的多个选项。从用户体验的角度来看，您认为最直观/最好的选择是什么？
A）为选择元素使用“multiple”属性（然后您可以按住control并选择多个选项）。 ADV：简单，无需编码。 DIS：不直观。
B) 有多个复选框和一个全选/全选控件。 ADV：相当简单。 DIS：当有很多选项时会变得混乱
C) 并排有两个选择多个菜单，并有用于添加/删除选项的按钮。所选选项将显示在右侧并提交。 ADV：干净 DIS：如果 JS 未打开，将会损坏。
有人能想到更好的选择吗？
I have a form in which a user can select multiple options in a select menu. From a user experience perspective, what do you think is the most intuitive / best option?
A) Use the "multiple" attribute for select element (then you can hold down control and select multiple options). ADV: Simple, no coding required. DIS: Not intuitive.
B) Have multiple checkboxes and a select all/select none control. ADV: Fairly simple. DIS: Will get cluttered when there are many options
C) Have two select multiple menus side-by-side and have buttons to add/remove options. The chosen options will be on the right and be submitted. ADV: Clean DIS: Will break if JS is not on.
Can anyone think of better options?
如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱，如果其他用户或者作者回复了您的评论，将不能在第一时间通知您！
发布评论
评论（2）
我投票给 B。
选项 A 是“普通”选项，但我讨厌必须按住 Control 并滚动一长串列表。不可避免地会有一些东西溜走并清除整个列表。我确信患有关节炎的人也讨厌它。
选项 C 是一个足够常见的范例，但是当您有多个选项时，跟踪就会有点困难，特别是如果选项与它们有任何顺序或关系。我更喜欢有一个列表，可以将所有选项与其邻居联系起来。我想这取决于您的具体用例。
选项 B 易于编码，无需 JS 即可使用 95%，并且为您的布局提供了完全的灵活性。它只会像你设计的那样混乱。这就是我进行多项选择的方式，并且发现它非常容易使用。
I vote for B.
Option A is the "vanilla" option, but I hate having to hold down Control and scroll through a long list. Inevitably something will slip and clear the whole list. I'm sure the folks with arthritis hate it too.
Option C is a common enough paradigm, but when you have more than a few options it gets a little difficult to keep track of, especially if the options have any order or relation to them. I prefer to have one list where I can relate all the options to their neighbors. It depends on your specific use case I suppose.
Option B is easy to code, can be used 95% without JS, and gives you complete flexibility in your layout. It's only as cluttered as you design it to be. This is the way I do multiple-selects and find it very easy to work with.
A) 如果你的清单不是很长，那很好。如果你有很多很多的物品，使用起来会很烦人。不好，因为它不可搜索，与选项 B 不同。B
) 好，因为这不需要用户理解按住控件。因此，用户也不会意外地清除他们的选择，这显然是一件好事。它还将更清晰地显示您选择的选项。很好，因为您可以将相关选项分组在单个标题或其他图形指示下。这种方法可以在没有 JS 的情况下工作，除了全选按钮之外，可以使用输入 type="reset" 来完成全选按钮。
C) 我认为，如果用户明确添加到列表中，而不是选择选项，这可能会很好。但正如你所说，如果没有 JS，它就无法运行。我会考虑 A 和 B 而不是这个。除非您提供自定义过滤框（这又取决于 JS），否则也无法搜索
A) Good if you don't have a very long list. It will be very annoying to use if you have lots and lots of items. Bad because it is not searchable, unlike option B.
B) Good because this will not require the user to understand holding down control. Because of this, the user won't be able to accidentally clear their selection either, which is obviously a good thing. It will also display much more cleanly what options you have chosen. Good because you can group related options under a single headline or other graphical indication. This approach will work without JS, with the exception of a select all button, a select none button can be done using a input type="reset".
C) I think this can be good if the user is clearly adding to a list, instead of selecting options. But as you say, it will not function without JS. I would consider A and B instead of this. Also not searchable unless you provide a custom filter box (which again depends on JS)