基于jQuery UI的多项选择下拉列表框组件

jquery.multiselect.js是一款基于jQuery UI的多项选择下拉列表框组件。该下拉列表功能强大，可以实现多选和单选，可制作打开和关闭下拉框时的炫酷动画效果，提供丰富的回调函数和其它方法。

使用方法

使用该多选下拉列表框插件需要在页面中引入jQuery UI相关文件，jQuery以及插件本身需要的jquery.multiselect.css和jquery.multiselect.js文件。

<link rel="stylesheet" type="text/css" href="css/jquery.multiselect.css" />
<link rel="stylesheet" type="text/css" href="http://libs.useso.com/js/jqueryui/1.10.4/css/jquery-ui.min.css" />
<script type="text/javascript" src="src/jquery.min.js"></script>
<script type="text/javascript" src="http://libs.useso.com/js/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="src/jquery.multiselect.js"></script>            
                

HTML结构

该下拉列表框的HTML结构为标准的下拉列表框结构，同时需要为它添加multiple属性。

<select id="example" name="example" multiple="multiple">
  <option value="1">Option 1</option>
  <option value="2">Option 2</option>
  <option value="3">Option 3</option>
  <option value="4">Option 4</option>
  <option value="5">Option 5</option>
</select>       
                

初始化插件

在页面DOM元素加载完毕之后，可以通过multiselect()方法来初始化该下拉列表框插件。

$(document).ready(function(){
   $("#example").multiselect();
});                
                

配置参数

可以在初始化插件的时候以对象的方式传入需要的参数：

$("select").multiselect({
   header: "请选择一个选项！"
});                  
                

事件

该下拉列表框调用方法的方式如下：

// 绑定事件
$("#multiselect").bind("multiselectopen", function(event, ui){
    // 事件处理
});

// 在初始化时传入事件处理函数
$("#multiselect").multiselect({
    open: function(event, ui){
        // 事件处理
    }
});              
            

方法

当插件被初始化为一个实例之后，可以通过方法名称来调用方法。

$("#multiselect").multiselect("method_name");              
            

jQuery UI MultiSelect Widget插件的github地址为：https://github.com/ehynds/jquery-ui-multiselect-widget