In many projects that I have there are times where a HTML select list has hundreds of options (ok at least 80+ options). By default the select list would be too large to display on the screen in a nice format. Previously, I had installed the Chosen module to provide a nice interface for large select widgets. Recently after some research I stumbled across the Jquery UI Multiselect Widget module and installed it to test as an alternative on large select lists.

Example Configuration and Usage

In my existing site I have a Chosen select list. In general I’m pleased with Chosen as a means to minimize UI clutter. But, I ended up written JS code that auto-selected alot of options. I don’t recall if Chosen allows searching, and a Select All widget but this new alternative does:

Here is my legacy Chosen widget in a generic drupal form (not a drupal Field):

Example existing large select field using the Chosen module.

Example select field expanded with Chosen, selected options are non-selectable.

After installing the Jquery UI Multiselect Widget module and its javascript dependency from github (I grabbed a zip of Tag 1.13) you can then configure the widget to be include for certain select lists and/or excluded on Paths. You can also enable a filtering field if you want in the UI:

Administration form for the multiselect widget. Typically it’s configured to ignore admin/* paths; but my site heavily uses that path.

After configuring the module you can see it in action:

Sample JQ multiselect enabled for existing large field.

Example multiselect expanded, which has a Select All option for all values.

In general I like the current state of this module as it offers a wealth of functionality in a lean UI for the end-user. For my use-case I like that it supports a Select All mechanism.

All in all I’m pleased to have found a new item for drupal site building toolbox in this module.

Looking for quality web hosting? Look no further than Arvixe Web Hosting!