query多選下拉框插件 jquery-multiselect

效果：http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/

 

特性

• 支持點擊label實現checkbox組選擇.
• 頭部選項，如全選/ 取消全選 /關閉功能.
• 支持鍵盤選擇.
• 支持5種不同的事件回調函數.
• 以列表方式顯示選中項目，並且可以設置最大顯示值.
• 方便改變位置，漸變速度，滾動容器的高度，鏈接文字，文本框默認內容等.
• 最小版只有 6.9kb.

兼容性

• Firefox 2 – 3.6
• IE 6 – 8
• Chrome Beta/4
• Safari 4
• Opera 10

用法

首先需要引入 jquery 1.4、jQuery UI theme, 和 jquery.multiselect.css . 我們在這用的不是jQuery UI library本身,而是他的主題文件. 最簡單的綁定select box方法:

 

<select id="MySelectBox" multiple="multiple" name="MySelectBox"> <option value="1">Option 1</option> <option value="2">Option 2</option></select>

<select id="MySelectBox" multiple="multiple" name="MySelectBox"> <option value="1">Option 1</option> <option value="2">Option 2</option></select>

 

$(document).ready(function(){
    $("#MySelectBox").multiSelect();
});

$(document).ready(function(){
    $("#MySelectBox").multiSelect();
});

 

 

回調函數

 

比如其中的 onOpen 回調函數, 如:

 

$("#MySelectBox").multiSelect({
    onOpen: function(){
        var $checkboxes = $(this).find('input');
    }
});

$("#MySelectBox").multiSelect({
	onOpen: function(){
		var $checkboxes = $(this).find('input');
	}
});

 

onClick 回調函數. Example:

 

$("#MySelectBox").multiSelect({
    onClick: function(){
        if(this.checked){
            alert("I was just checked!");
        }
    }
});

$("#MySelectBox").multiSelect({
	onClick: function(){
		if(this.checked){
			alert("I was just checked!");
		}
	}
});

 

更多回調函數請看下面列表.

 

 

重載項

參數選項均在 $.fn.multiSelect.defaults中保存 , 你可以如下改變默認選項:

 

// set the minWidth parameter for all instances to 500 pixels
.fn.multiSelect.defaults.minWidth = 500;

 // set the minWidth parameter for all instances to 500 pixels
$.fn.multiSelect.defaults.minWidth = 500;

 

 

Passing a function to the selectedText parameter

As of 0.5, the selectedText parameter can accept an anonymous function with three arguments: the number of checkboxes checked, the total number of checkboxes, and an array of the checked checkbox DOM elements. As you can see in the example, this gives you 100% control of the display:

 

$("#MySelectBox").multiSelect({
    selectedText: function(numChecked, numTotal, checkedInputs){

        // example: emulating the default behavior
        return numChecked + " checked";

        // example: emulating the selectedList option
        return (numChecked < = 5)
            ? checkedInputs.map(function(element){ return element.title; }).join(', ')
            : numChecked + " checked";
    }
});

$("#MySelectBox").multiSelect({
	selectedText: function(numChecked, numTotal, checkedInputs){

		// example: emulating the default behavior
		return numChecked + " checked"; 

		// example: emulating the selectedList option
		return (numChecked < = 5)
			? checkedInputs.map(function(element){ return element.title; }).join(', ')
			: numChecked + " checked";
	}
});

參數

Parameter	Description	Default
showHeader	A boolean value denoting whether or not to display the header containing the check all, uncheck all, and close links.	true
maxHeight	The maximum height in pixels of the scrolling container that holds the checkboxes.	175
minWidth	The minimum width in pixels of widget. Setting to auto (default) will inherit the width from the original select element.	200
checkAllText	The default text of the “Check all” link.	Check all
unCheckAllText	The default text of the “Uncheck all” link.	Uncheck all
noneSelectedText	Renamed from noneSelected in 0.5! The default text the select box when no options have been selected.	Select options
selectedList	A boolean/numeric value denoting whether or not to display the checked opens in a list, and how many. A number greater than 0 denotes the maximum number of list items to display before switching over to the selectedText parameter. A value of 0 or false is disabled.	false
selectedText	The text to display in the select box when options are selected (if selectedList is false). The pound sign (#) is automatically replaced by the number of checkboxes selected. If two pound signs are present in this parameter, the second will be replaced by the total number of checkboxes available. Example: “# of # checked”. New in 0.5! As of 0.5, this parameter can also accept an anonymous function with three arguments: the number of checkboxes checked, the total number of checkboxes, and an array of the checked checkbox DOM elements. See the examples.	# selected
position	The position of the options menu relative to the input control: top, middle, or bottom.	bottom
shadow	A boolean value denoting whether to apply a css shadow (class ui-multiselect-shadow).	false
fadeSpeed	How fast (in ms) to fade out the options menu on close.	200
state	New in 0.5! The default state of the widget. Either open or closed.	closed
disabled	New in 0.5! Whether or not to disabled the widget by default. Important: see the “Known Issues” section below for more documentation on this.	false
onCheck	A callback to fire when a checkbox is checked.	Function
onOpen	A callback to fire when the options menu is opened.	Function
onCheckAll	A callback to fire when the “Check all” link is clicked.	Function
onUncheckAll	A callback to fire when the “Uncheck all” link is clicked.	Function
onOptgroupToggle	A callback to fire when the opgroup header is clicked. An array of checkboxes inside the optgroup is passed as an optional argument.