Item 1 Item 2 Item 3 Item 4 Item 5 Item 6 Item 7 Item 8 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

• 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").multipleSelectBox();
});

• 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_MaxLimit").multipleSelectBox({
		maxLimit : 2
	});
});

• 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_ScrollSpeed").multipleSelectBox({
		scrollSpeed : 1
	});
});

• 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() {
	var showResult = document.getElementById("showResult");

	$("#MultipleSelectBox_ShowResult").multipleSelectBox({
		onSelectEnd : function() {
			/* put all results into a component */
			showResult.innerHTML = $(this).serializeMultipleSelectBox(", ");
		}
	});
});

• 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_FormComponent").multipleSelectBox({
		submitField : "formComponent",
		valueRendererArray : [ "aaa", "bbb", "ccc", "ddd", "eee" ]
	});
});

• 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() {
	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);
	});
});

• 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
	});
});

• 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() {
	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");
		});
	});
});

• 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_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");
		}
	});
});