Fetching contributors…
Cannot retrieve contributors at this time
196 lines (126 sloc) 5.32 KB

bsmSelect - Better Select Multiple

Changes from original:

  • Added option addToParent (default: false).
    Append the generated select field and label to the the parent of the original element (this should be some container element like div or p if you do valid html)
  • Selected elements get pushed into an <ul> or <ol> - without any classes or ids - which is appended to the parent of the original element
  • There is no "remove"-anchor tag. Instead the remove happens on click onto some <li>. Feel free to style the li:hover with css.


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($) {
        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+


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 $('<ul>'); } Default: 'ol' highlightEffect: Show a quick highlight of what item was added or removed? Allowed values: an animation function Default: $.noop (no effect) showEffect: Animate the addition of an item to the list Allowed values: an animation function Default: $ hideEffect: Animate the removal of an items from the list Allowed values: an animation function Default: $.bsmSelect.effects.remove 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' or 'original' to keep the original select sort order Default: 'bottom' Note: When using the 'original' mode, the sort order can be overridden by setting the 'bsm-order' data on each option. 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 plugins An array of plugins objects to enable (they only are required to have an init method which is called on init with the Bsmselect instance as single argument). Default: an empty array (no plugin enabled by default) 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'

Authors and contributors