Skip to content


Subversion checkout URL

You can clone with HTTPS or Subversion.

Download ZIP
Better Select Multiple (bsmSelect) is a fork of the asmSelect jquery plugin (
JavaScript PHP
branch: master

This branch is 9 commits ahead, 41 commits behind vicb:master

Fetching latest commit…

Cannot retrieve the latest commit at this time

Failed to load latest commit information.

bsmSelect - Better Select Multiple

based on asmSelect - Alternate Select Multiple by Ryan Cramer


bsmSelect demo


Include jquery, bsmSelect, and css in document head:

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.bsmselect.js"></script>
<link rel="stylesheet" type="text/css" href="jquery.bsmselect.css" />

Use a jQuery selector in your document ready function:

jQuery(function($) {

If desired, you can specify options when you call the plugin:

jQuery(function($) {
        sortable: true,
        animate: true,
        addItemTarget: 'top'

The newly created select default option is the original select title attribute:

<select name="cities" multiple="multiple" title="Please select a city">


  • jQuery 1.4+
  • jQueryUi 1.8+ when using a sortable list (requires Draggables, Droppables, and Sortables)


Primary Options

  • listType:

    • Specify what list will be created or used as part of the bsmSelect.
    • Can accept a callback that accepts the original as an argument and returns a jQuery object with a single list.
    • Allowed values:
      • 'ol'
      • 'ul'
      • function(originalSelect) { // your code; return $('
          '); }
    • Default: 'ol'
  • sortable:

    • May the user drag and drop to sort the list of elements they have selected?
    • Allowed values: true or false
    • Default: false
    • Note: In order to use this option, you must have jQuery-UI Draggables, Droppables, and Sortables enabled.
  • highlight:

    • Show a quick highlight of what item was added or removed?
    • Allowed values:
      • true/false
      • an animation function
      • the name of an animation function as a properties of $.fn.bsmSelect.effects
    • Default: false
  • animate:

    • Animate the adding or removing of items from the list?
    • Allowed values:
      • true/false
      • an object with properties 'add' and 'drop' which are either:
        • animation function,
        • the name of an animation function as a properties of $.fn.bsmSelect.effects
    • Default: false
  • hideWhenAdded:

    • Stop showing in select after item has been added?
    • Allowed values: true or false
    • Default: false
    • Note: Only functional in Firefox 3 at this time.
  • addItemTarget:

    • Where to place new selected items that are added to the list.
    • Allowed values: 'top' or 'bottom'
    • Default: 'bottom'
  • debugMode:

    • Keeps original select multiple visible so that you can monitor live changes made to it when debugging.
    • Default: false
  • extractLabel:

    • A function to compute the list element name from the option object
    • Default: extract the option html

Text Labels

  • title

    • Text used for the default select label (when original select title attribute is not set)
    • Default: 'Select...'
  • removeLabel:

    • Text used for the remove link of each list item.
    • Default: 'remove'
  • highlightAddedLabel:

    • Text that precedes highlight of item added.
    • Default: 'Added: '
  • highlightRemovedLabel:

    • Text that precedes highlight of item removed.
    • Default: 'Removed: '

Modifiable CSS Classes

  • containerClass:

    • Class for container that wraps the entire bsmSelect.
    • Default: 'bsmContainer'
  • selectClass:

    • Class for the newly created .
    • Default: 'bsmSelect'
  • listClass:

    • Class for the newly created list of listType (ol or ul).
    • Default: 'bsmList'
  • listSortableClass:

    • Another class given to the list when sortable is active.
    • Default: 'bsmListSortable'
  • listItemClass:

    • Class given to the
    • list items.
    • Default: 'bsmListItem'
  • listItemLabelClass:

    • Class for the label text that appears in list items.
    • Default: 'bsmListItemLabel'
  • removeClass:

    • Class given to the remove link in each list item.
    • Any element found in the
    • with this class will remove it.
    • If you give the
    • this class, clicking anywhere on the
    • will remove it.
    • Default: 'bsmListItemRemove'
  • highlightClass:

    • Class given to the highlight .
    • Default: 'bsmHighlight'
  • originalClass:

    • Class given to the original .
    • Default: 'bsmOriginalSelect'


Nutshell contributions:

  • Only run bsmSelect once per select
  • Allow usage of an existing list to use as the bin (in case you want it elsewhere in the DOM)

vicb's github latest:

  • improved custom animations
  • support for optgroup
  • ability to set the default select title via the configuration
  • make the original label point to the new select
  • ability to customize the way list label gets extracted from the option


  • Renamed asmSelect to bsmSelect
  • Refactor the code in order to implement plugin best practices
  • Ability to use custom animations (see options and examples)
Something went wrong with that request. Please try again.