Expand the contents of a select element to increase the number of option elements.

Question

Hi folks,

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.

Answer 1

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.