Jquery 多选插件使用

queryfunctioncallbackjquerydocumentationinput

目录(?)[+]

效果：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方法:

 

Html代码

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

[html] view
plaincopyprint?

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

 

Js代码

$(document).ready(function(){
  

    $("#MySelectBox").multiSelect();
  

});  

[js] view
plaincopyprint?

$(document).ready(function(){  

    $("#MySelectBox").multiSelect();  

});  

 

 

回调函数

 

比如其中的 

onOpen

 回调函数, 如:

 

Js代码

$("#MySelectBox").multiSelect({
  

    onOpen: function(){
  

        var $checkboxes = $(this).find('input');
  

    }   

});  

[js] view
plaincopyprint?

$("#MySelectBox").multiSelect({  

    onOpen: function(){  

        var $checkboxes = $(this).find('input');  

    }  

});  

 

onClick

 回调函数. Example:

 

Js代码

$("#MySelectBox").multiSelect({
  

    onClick: function(){
  

        if(this.checked){
  

            alert("I was just checked!");
  

        }   

    }   

});  

[js] view
plaincopyprint?

$("#MySelectBox").multiSelect({  

    onClick: function(){  

        if(this.checked){  

            alert("I was just checked!");  

        }  

    }  

});  

 

更多回调函数请看下面列表.

 

 

重载项

参数选项均在 

$.fn.multiSelect.defaults中保存

 , 你可以如下改变默认选项:

 

Js代码

// set the minWidth parameter for all instances to 500 pixels   

.fn.multiSelect.defaults.minWidth = 500;  

[js] view
plaincopyprint?

// 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:

 

Js代码

$("#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";
  

    }   

});  

[js] view
plaincopyprint?

$("#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";  

    }  

});  

[js] view
plaincopyprint?

<h2><a name="t6"></a>参数</h2>  

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.