jQuery multiselect – two column transfer widget

Multiselect is a tiny plugin, for creating your select with multiple attribute, and two columns transfer solution.

jQuery multiselect – easy implementation of two columns transfer widget

It’s a great replacement for the standard select element with multiple attribute, with great features, such as:

– Keyboard support

– Fully customization via CSS

– Callbacks, Search, Pre-selected, Public methods support

jQuery multiselect two column transfer
jQuery multiselect two column transfer

It’s also free (open source), works in an unobtrusive fashion, and tiny (code ~8kb minified).

Usage

HTML:

<html>
  <head>
    <link href="multiselect.css" media="screen" rel="stylesheet"
     type="text/css">
  </head>
  <body>
    <select multiple="multiple" id="my-select" name="my-select[]">
      <option value='elem_1'>elem 1</option>
      <option value='elem_2'>elem 2</option>
      <option value='elem_3'>elem 3</option>
      <option value='elem_4'>elem 4</option>
      ...
      <option value='elem_100'>elem 100</option>
    </select>
    <script src="path/to/jquery.multi-select.js" 
      type="text/javascript"></script>
  </body>
</html>

JavaScript:

$('#my-select').multiSelect()

Homepage with full documentation:

http://loudev.com

GitHub:

https://github.com/lou/multi-select

See also:

http://javascript-html5-tutorial.com/jquery-mini-tips-iii-forms.html

Enjoy!

Share:Share on Facebook1Share on Google+0Tweet about this on TwitterShare on LinkedIn1Pin on Pinterest1