Multiple Select Alternatives

Categories: Development
Tags: ,
Comments: 3 Comments
Published on: March 15, 2011

I think we have all heard the argument that multiple selects are not ideal inputs because to the average user, they require explanation as to how to actually select multiple items. It seems the most common approach to partially eliminate that confusion is the use of slush boxes. This eliminates the necessity to understand how to shift-click, but even with this approach, the shift-click would speed up the process if the user always understood the option was there. Here are some great jQuery plugins I found that really take it a step further and make some really powerful and clear alternatives to both the standard multi-select and the slushbox.

In the article Select Multiple Form Fields the author touches on the points I made above, but also presents a couple of additional options. One being a scrollable list of checkboxes, which is a definite improvement, but as he describes still has some limitations. The other alternative he mentions is the jQuery plugin asmSelect. This one, in my opinion, eliminates all of the guess work from interacting with the input field. He outlines that there are still some disadvantages, one of them being that you lose ability to quickly add several or all items at once. After reading the documentation on the plugin, I noticed that there is a fork of the project called bsmSelect, which takes the same concept and enhances it with things like effects, option groups, and the ability to select all (I am not 100% sure that this feature doesn’t exist in asmSelect, if that is the case I stand corrected). The select all feature helps to address the effeciency issue that was noted before where you cannot add multiple items at once. In my opinion, this doesn’t lack much at this point. Really nice tool.

The other alternative i consider as viable as those I just mentioned is this the jQuery UI MultiSelect Widget. This offers many of the benefits of the last example, but there is a significant benefit that comes with a sacrifice. The last plugin does not give you a guarantee on how much real estate the input will use on your page because it shows all of the selections on the screen. This one hides the selections, though it has one option “Using selectedText/selectedList” that will show a limited number of the selections, but can only use the width afforded to it before it just shows the count. This is a benefit in the way you can guarantee that this input will never use up a large percentage of space on your page. However, it can also be viewed as a drawback because it takes away the benefit of seeing your selections on the screen at all times. It all depends on your situation and preference. Both are amazing tools.

3 Comments - Leave a comment
  1. joe banken says:

    Nice post. Ive ran into this issue alot too. I personally like checkboxes.

  2. scott says:

    I ended up using the MultiSelect Widget. Since the only thing I missed with it was seeing your selected options on the screen without having to open it up, I was able to bind to it’s events to display a nice plain list of selected options right below it that changes as you change your selections. So far I have found it to be a very impressive widget and it seems really stable cross browser. Very happy with it.

  3. These guys just posted what I would consider my favorite alternative (appearance/usability-wise) thus far… haven’t dug into applying it anywhere yet though: http://abeautifulsite.net/blog/2011/01/jquery-selectbox-plugin/

Leave a comment

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>