jQuery Multiple Select Box Plugin

An useful and cross-browser jQuery plugin that replaces your browser's default multiple select box to allow you to select multiple items when scrolling and dragging. 

You might also like:

• jQuery Multiple Select Element Replacement Plugin - selectlist

Features:

• Items Max Limit supported
• Each item can be stylisable
• Horizontal Select Box supported
• Selection Animation supported

Basic Usage:

1. Download and include the latest jQuery library and jquery.multipleselectbox.js on your web page

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.multipleselectbox.js"></script>

2. The CSS

.MultipleSelectBox {
border: 1px solid #aaa;
height: 200px;
list-style-type: none;
margin: 0;
overflow: auto;
padding: 1px 0;
width: 500px;
/* corner */
-moz-border-radius: 5px;
-khtml-border-radius: 5px;
-webkit-border-radius: 5px;
border-radius: 5px;
-moz-box-shadow: 0 0 5px #888;
-webkit-box-shadow: 0 0 5px #888;
box-shadow: 0 0 5px #888;
}
.MultipleSelectBox.selecting {
border: 1px solid black;
}
.MultipleSelectBox li {
border: 1px solid white;
cursor: pointer;
padding: 0 3px;
}
.MultipleSelectBox li.disabled {
color: gray;
font-style: italic;
}
.MultipleSelectBox li.optgroup {
font-style: italic;
font-weight: bold;
}
.MultipleSelectBox li.selected {
border: 1px solid #F39814;
background-color: #F39814;
}
.MultipleSelectBox li.selecting {
border: 1px dotted black;
}
.MultipleSelectBox.vertical li.optgroupitem {
margin-left: 30px;
}
/* horizontal mode */
.MultipleSelectBox.horizontal {
height: auto;
white-space: nowrap;
}
.MultipleSelectBox.horizontal li {
display: inline-block;
	/* for IE6 and IE7 */
	*display: inline;
vertical-align: middle;
}
.MultipleSelectBox.horizontal li.optgroup {
margin-bottom: 10px;
}
/* Ultimate CSS Gradient Generator (Orange 3D) */
.MultipleSelectBox li.selected {
background: #ffa84c;
background: -moz-linear-gradient(top, #ffa84c 0%, #ff7b0d 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #ffa84c), color-stop(100%, #ff7b0d));
background: -webkit-linear-gradient(top, #ffa84c 0%, #ff7b0d 100%);
background: -o-linear-gradient(top, #ffa84c 0%, #ff7b0d 100%);
background: -ms-linear-gradient(top, #ffa84c 0%, #ff7b0d 100%);
background: linear-gradient(to bottom, #ffa84c 0%, #ff7b0d 100%);
 filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffa84c', endColorstr='#ff7b0d', GradientType=0 );
/* for IE6 */
_background: #F39814;
}

3. The HTML

<ul id="MultipleSelectBox">
<li>Item 1</li>
<li class="selected">Item 2</li>
<li><font color="red" size="1">Style Item <font size="7">3</font></font></li>
<li style="margin: 0 30px;"><font size="6" color="green">Style<font size="3"><a class="original" href="#">Item 4</a></font></font></li>
<li class="disabled">Item 5 - Disabled</li>
<li class="optgroup">Item 6 - Group <small>(double click it)</small></li>
<li class="optgroupitem">Group item 7</li>
<li class="optgroupitem">Group item 8</li>
...
</ul>

4. Call the plugin with default settings.

<script type="text/javascript">
$(document).ready(function() {
	$("#MultipleSelectBox").multipleSelectBox();
});
</script>

5. All the default settings.

maxLimit : -1,
scrollSpeed : 50,
isHorizontalMode : false,
isPopupMode : false,
isTouchDeviceMode : PLUGIN_MODE_AUTO,
isMouseEventEnabled : true,
isKeyEventEnabled : true,
/* form options */
submitField : null,
/* filter options */
isFilterEnabled : true,
filterField : null,
/* callback function */
onCreate : null,
onSelectStart : null,
onSelectEnd : null,
onSelectChange : null,
/* others */
scrollHelper : null

Change Log:

2016-03-19

• Fix bug: onSelectChange error

2014-05-18

• Fix bug: serialize submit field after initializing

2014-03-02

• Add isFilterEnabled
• Remove getMultipleSelectBoxHistory's isReNew parameter
• Add method: clearMultipleSelectBoxHistory and refreshMultipleSelectBox

v0.8.1 (2013-09-07)

• Add isPopupMode
• Rename containerHistory's startIndex, currentIndex, prevStartIndex and prevCurrentIndex
• Remove getMultipleSelectBoxCachedRows's isReNew parameter
• Add method: clearMultipleSelectBoxCachedRows
• Add method: selectMultipleSelectBoxRow, unselectMultipleSelectBoxRow, selectAllMultipleSelectBoxRows, unselectAllMultipleSelectBoxRows, enableMultipleSelectBoxRow and disableMultipleSelectBoxRow
• Minor bug fixes

v0.8.0 (2013-06-16)

• Remove method: recalculateMultipleSelectBox, getMultipleSelectBoxInfo, getSelectedRowIndexArray and drawOption.isGetPositionByCache
• Add method: getMultipleSelectBoxViewport and getMultipleSelectBoxHistory
• Add namespace for all plugin event binding
• Change options: option name scrollDistanceCalculator to scrollHelper
• Change options: default scrollSpeed 20 to 50
• Rename containerHistory's lastStartIndex, lastCurrentIndex and prevSelectedArray
• Fix bug for IE10: detect touch device return true always
• Minor changes

---

This awesome jQuery plugin is developed by h920526. For more Advanced Usages, please check the demo page or visit the official website.