展开select元素的内容以增加选项元素的数量

Question

我有一个包含大量选项元素的select元素，我正在寻找一种在所有选项可用和可供选择的子选项之间切换的方法（该子集是最受欢迎的选项） ）。选项按字母顺序排序，并按其值的首字母分组。

如果用户在浏览显示选项子集的select元素时没有看到他们想要的选项，那么能够选择名为“show more Bs”的选项并且不折叠选项会很好元素，魔法出现的全套选项。通过折叠，我在谈论选择其中一个选项时选择元素的正常行为。

显然很容易选择一个选项并触发select元素的重新填充，但是从用户的角度来看，如果select元素必须折叠才能重新填充它并不完全直观 - 我的感觉就是用户可能想象他们需要点击搜索按钮才能看到更多的B，而实际上他们需要重新打开选择。

那么我的问题是：是否可以重新填充或添加选项而不折叠它？

当然，我已经在网上寻找解决方案而没有发现任何有价值的东西 - 这当然可以归结为我的（可能缺乏）搜索功能。我觉得应该有一个javascript解决方案（不是我的强项），理想情况下是一个jquery，所以最好问一些专家的方法。当然，如果我的问题返回响亮的“不！”，我会接受其他优雅和直观的解决方案以达到相同的效果。

感谢阅读。

Answer 1

简单地说：不。当select元素失去焦点时，选择框将崩溃。如果你想创建一个动态的选择工具，而不会有一个不直观的崩溃，我建议你跳出框框思考。

花一天时间考虑创建用户界面以实现显示数据目标的所有可能方法。也许在摘要框之外抽象“选择更多...”选项。也许不使用选择框并使用手风琴风格的小部件。

编辑：现在我想起来了，这可以通过一些JavaScript-fu来实现。您可以创建弹出样式窗口，而不是使用选择列表。一个典型的例子是屏幕左上角的StackExchange下拉列表。