扩展选择元素的内容以增加选项元素的数量
我有一个包含大量选项元素的选择元素,我正在寻找一种在所有可用选项和可供选择的选项子集(该子集是最受欢迎的选项)之间切换的方法。这些选项按字母顺序排列,并按其值的首字母分组。
如果用户在浏览显示选项子集的 select 元素时没有看到他们想要的选项,那么最好能够选择一个名为“show more Bs”的选项,并且在不折叠 select 元素的情况下,全套选项神奇地出现。通过折叠,我谈论的是选择元素的选项之一被选中时的正常行为。
显然,选择一个选项并触发 select 元素的重新填充很容易,但从用户的角度来看,如果 select 元素必须折叠才能重新填充,那么这并不完全直观 - 我的感觉是用户可能会想象他们需要单击搜索按钮才能看到更多 B,而实际上他们需要重新打开选择。
那么我的问题是:是否可以重新填充或添加选项到选择元素而不折叠它?
当然,我在网上寻找解决方案,但没有发现任何有价值的东西——这当然可能归因于我(可能缺乏)搜索能力。我觉得应该有一个 javascript 解决方案(不是我的强项),最好是 jquery 解决方案,所以最好询问一些专家的想法。当然,如果我的问题返回一个响亮的“不!”,我愿意接受其他优雅且直观的解决方案来实现相同的结果。
感谢您的阅读。
I've got a select element with a large number of option elements and I'm looking for a way to toggle between having all options available and having a subset of the options available for selection (the subset being the most popular options). The options are ordered alphabetically and are grouped by their value's initial letter.
If the user doesn't see the option they want while browsing the select element showing a subset of options, it would be nice to be able to select an option named something like "show more Bs" and, without collapsing the select element, the full set of options magically appear. By collapsing, I'm talking about the normal behaviour of a select element when one of its options is selected.
It would obviously be easy to select an option and trigger re-population of the select element, but from a users perspective, it's not exactly intuitive if the select element has to collapse in order to repopulate - my feeling is that the user might imagine they need to click the search button to see more Bs when in fact they would need to re-open the select.
So my question then: is it possible to repopulate or add options to a select element without collapsing it?
I have, of course, trawled the web looking for a solution and found nothing of value - this could of course be down to my (possible lack-of) search-fu. I feel like there ought to be a javascript solution (not my forte) and ideally a jquery one, so better ask some experts methoughteth. Naturally, I'm open to other elegant and intuitive solutions to achieve the same result, should my question return a resounding "No!".
Thanks for reading.
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(1)
简单地说:不。当选择元素失去焦点时,选择框将折叠。如果您想创建一个动态选择工具而不会出现不直观的崩溃,我建议您跳出框框思考。
花一天时间思考创建用户界面来实现显示数据的目标的所有可能方法。也许在选择框之外抽象“选择更多...”选项。也许不使用选择框并使用手风琴样式小部件。
编辑:现在我想了一下,这可以通过一些 JavaScript-fu 实现。您可以创建弹出式窗口,而不是使用选择列表。一个典型的例子是屏幕左上角的 StackExchange 下拉菜单。
Simply put: no. The moment the select element loses focus the select box will collapse. If you wanted to create a dynamic selection tool without having an unintuitive collapse I would suggest thinking outside the box.
Take a day and think of all the possible ways you could create a User Interface to accomplish this goal of displaying data. Perhaps abstracting the "Select More..." options outside of the select box. Perhaps Not using a select box and using an accordion style widget.
Edit: Now that I think about it, this is possible with some JavaScript-fu. Instead of using a select list, you could create a pop-up style window. A prime example of this is the StackExchange drop-down in the upper-left corner of your screen.