jQuery Picklist Plugin

Description

A jQuery plugin from GSGD to turn multiple select boxes into a dual select picklist style thing. It uses progressive enhancement so you'll only get the two boxes if you've got javascript enabled, otherwise you get standard multiple select box functionality. It works using both buttons and/or double click. We need this because multiple selects are broken (Seth Godin style). They're just a pain to use.

Download

Download the following:

Credits

Kinda based on jqMultiSelects. The IE emulate disabled stuff was based on Select, Option, Disabled And The JavaScript Solution.

Usage

It's pretty simple, see the examples below. There's some styling hooks, have a look at the CSS in this pages source to see what they are. IE needs a bit of help to understand what to do with a disabled option, so there's an emulatedisabled plugin you need too (conditionally commented out, though it checks anyway). There's some options you can set, but I've hopefully included some sensible defaults. There's even a test mode, which prevents form submission so you can check the final selection process is working.

Donate

If you use this in a commercial project, you might consider a small donation by way of thanks. Use the button below to donate via paypal.

Examples


$("#simple").pickList();


$("#options").pickList({
  buttons: true,
  beforeFrom: 'Choices',
  beforeTo: 'Selected',
  addText: 'add item',
  addImage: 'but_add.gif',
  removeText: 'remove item',
  removeImage: 'but_remove.gif',
  ieColor: '#FFFFFF',
  ieBg: 'graytext',
  testMode: true
});

Additional

CSS For Disabled Items

You will need the emulatedisabled plugin to emulate this behaviour in IE

option[disabled] {
  background-color:(any hex rgb or named colour);
  color:(any hex rgb or named colour);
}

Conditional Comment Code