This jQuery plugin is able to transform a classic <select multiple="multiple"> input field of a form into a nice foldable list with easily selected elements, even for a touch device like a smartphone.

You can look at the demo folder to watch a working use of this plugin.

Usage

You can simply use this plugin by creating a standard <select multiple="multiple"> list :

<select multiple="multiple">
  <option value="1" selected="selected">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3" selected="selected">Java</option>
  <option value="4">Option 4</option>
</select>

Then in a javascript script, you can simply use this function :

$('select').touchMultiSelect();

Parameters

Some parameters can be passed to the function to customize the behavior of the plugin :

• noneButtonPresent
  Determines if a 'none' button must be included in the list
  default value : true

• noneButtonText
  Determines the text of the 'none' button if there is one
  default value : 'None'

• noneButtonAtBeginning
  Determines if the 'none' button must be prepended (true) or appended (false) to the list
  default value : true

• permitNoSelectedButton
  If there is no 'none' button, determines if we can deselect an option if there is no other selected option
  default value : false

• maximumNumberSelections
  Limits how many options can be selected; default is no limitation (null)
  default value : null

Example

$('select').touchMultiSelect({
  noneButtonPresent: false,
  permitNoSelectedButton: true
});

Information

This plugin has been made as a part of my work at Novelys.

License

MIT License. Copyright 2012 Novelys.