jQuery Multiple Select Box Plugin


The default multiple select box's tag of HTML

[ The jQuery multiple select box plugin ]

Download this plugin

The example show how to use the jQueryMultipleSelectBox to replace your browser's default multiple select box on an element with overflow: auto.
You can see the result when controlling the mouse down and drag out of the box.

Tested with: Android 2+, Chrome 22, Firefox 16, IE 6+, Safari 5
Simple Demo:

Usage: 
$(document).ready(function() {
	$("#MultipleSelectBox").multipleSelectBox();
});
Simple Demo: Max Limit

Usage: 
$(document).ready(function() {
	$("#MultipleSelectBox_MaxLimit").multipleSelectBox({
		maxLimit : 2
	});
});
Simple Demo: Scroll Speed

Usage: 
$(document).ready(function() {
	$("#MultipleSelectBox_ScrollSpeed").multipleSelectBox({
		scrollSpeed : 1
	});
});
Simple Demo: Show Result

Result:  

Usage: 
$(document).ready(function() {
	var showResult = document.getElementById("showResult");

	$("#MultipleSelectBox_ShowResult").multipleSelectBox({
		onSelectEnd : function() {
			/* put all results into a component */
			showResult.innerHTML = $(this).serializeMultipleSelectBox();
		}
	});
});
Simple Demo: Form Component (value-render)



Usage: 
$(document).ready(function() {
	$("#MultipleSelectBox_FormComponent").multipleSelectBox({
		submitField : "formComponent"
	});
});
Simple Demo: Draw Range

Draw Range:     to     

Usage: 
$(document).ready(function() {
	var $drawRangeContainer = $("#MultipleSelectBox_DrawRange").multipleSelectBox();

	var drawRangeStartIndex = document.getElementById("drawRangeStartIndex");
	var drawRangeCurrentIndex = document.getElementById("drawRangeCurrentIndex");

	$("#drawRangeButton").click(function() {
		var startIndex = parseInt(drawRangeStartIndex.value) - 1;
		var currentIndex = parseInt(drawRangeCurrentIndex.value) - 1;
		$drawRangeContainer.drawMultipleSelectBox(startIndex, currentIndex);
	});
});
Simple Demo: Horizontal Box  New!
  • Item 1
  • Item 2
  • Style Item 3
  • Style Item 4
  • Item 5 - Disabled
  • Item 6 - Group (double click it)
  • Group item 7
  • Group item 8
  • Group item 9
  • Item 10
  • Item 11
  • Item 12
  • Item 13
  • Item 14
  • Item 15
  • Item 16
  • Item 17
  • Item 18
  • Item 19
  • Item 20
  • Item 21
  • Item 22
  • Item 23
  • Item 24
  • Item 25

Usage: 
$(document).ready(function() {
	$("#MultipleSelectBox_HorizontalBox").multipleSelectBox({
		isHorizontalMode : true
	});
});
Advance Demo: DropDown


Usage: 
$(document).ready(function() {
	var controlDropDown = $("#controlDropDown");

	var $dropDownContainer = $("#MultipleSelectBox_DropDown").multipleSelectBox({
		submitField : controlDropDown,
		onSelectEnd : function() {
			/* slide up */
			$(this).slideUp("slow");
		}
	});

	controlDropDown.click(function(e) {
		e.stopPropagation();
		$dropDownContainer.slideDown("slow");
		$(document).one("click", function() {
			$dropDownContainer.slideUp("slow");
		});
	});
});
Advance Demo: Animation

Usage: 
$(document).ready(function() {
	$("#MultipleSelectBox_Animation").multipleSelectBox({
		onSelectStart : function() {
			$(this).children().stop().css({
				opacity : "",
				backgroundColor : ""
			});
		},
		onSelectEnd : function() {
			$(this).children(":not(.selected)").css("background-color", "white").animate({
				opacity : 0.5
			}, "fast");
		}
	});
});