最近在做一个项目，其中需要用到一个组件，即能支持多选的select，几经在Baidu、Google中探寻，终于发现了一款中意的，无论是在UI上还是在扩展使用上都非常不错，现在把它贴出来与大家一起分享。

JQuery MultiSelect Plugin

• 当前版本: 0.6 (05/04/2010 – Changelog)
• demos
• Download source (12.5 kb) or minified (6.8 kb), and the CSS file.
• Follow this project on GitHub

特性

• 支持点击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方法:

 Option 1 Option 2

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

回调函数

比如其中的 onOpen 回调函数, 如:

$(“#MySelectBox”).multiSelect({
    onOpen: function(){
        var $checkboxes = $(this).find(‘input’);
    }
});

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

 // 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”;
    }
});

参数

推荐阅读：jQuery3D全景展示插件