## Multiple Select Multiple select 是一个通过复选框来选择多元素的 jQuery 插件:). *当前版本: 1.2.1* ## Requirements * jQuery >= 1.7.0 ## Features * 默认选项允许显示复选框。 * 支持分组显示元素。 * 支持在一行中显示多个选项。 * 支持全选。 * 支持显示默认提示信息。 ## Browser Compatibility * IE 7+ * Chrome 8+ * Firefox 10+ * Safari 3+ * Opera 10.6+ ## Examples ### The Basics1 Multiple Select 可以将标准的复选框:
转换为: ``` html ``` ### The Basics2 Multiple Select 可以将标准的复选框:
转换为: ``` html ``` ### The Basics3 Multiple Select 可以将标准的复选框:
转换为: ``` html ``` ### With Optgroups1 Multiple Select 可以将标准的复选框:
转换为: ``` html ``` ### With Optgroups2 Multiple Select 可以将标准的复选框:
转换为: ``` html ``` ### The Placeholder
``` html ``` ### The Multiple Items Multiple Select 支持在一行中显示多个选项:
``` html ``` ### With Optgroups Multiple Select 支持在一行中显示多个选项以及支持分组。
``` html ``` ### The Hide Select All
``` html ``` ### The Single Row
``` html ``` ### The Position 设置下拉列表显示在上方。
``` html ``` ### The Filter1
``` html ``` ### The Filter2
``` html ``` ### SetSelects/GetSelects
``` html ``` ### Enable/Disable
``` html ``` ### CheckAll/UncheckAll
``` html ``` ### The Refresh 重新加载 Multiple Select: 假如你是通过 AJAX 或者 DOM 来手动添加或者删除 option 选项,可以通过 refresh 方法来重新加载 Multiple Select。
``` html
这里显示事件的结果。
``` html
Here is the result of event.
``` ## Documentation ### Constructor #### isOpen 类型: boolean 是否打开下拉列表。 默认值为 ```false```。 #### placeholder 类型: string 显示默认的提示信息。 默认值为 ```''```。 #### selectAll 类型: boolean 是否显示全选复选框。 默认值为 ```true```。 #### selectAllText 类型: string 全选复选框的显示内容。 默认值为 ```Select all```。 #### multiple 类型: boolean 是否在一行中显示多个选项。 默认值为 ```false```。 #### multipleWidth 类型: integer 一行中每个选项的宽度。 默认值为 ```80```。 #### single 类型: boolean 是否只允许你选择一行。 默认值为 ```false```。 #### position 类型: string 定义下拉列表的位置,只能是 ```bottom``` 或者 ```top```。 默认值为 ```bottom```. #### filter 类型: boolean 是否开启过滤功能。 默认值为 ```false```。 #### width 类型: integer 定义下拉列表的宽度。 默认值为 ```undefined```。 默认与 select 的宽度相同。 #### maxHeight 类型: integer 下拉列表的最大高度。 默认值为 ```250```。 ### Events #### onOpen 当下拉列表被打开时触发。 #### onClose 当下拉列表被关闭时触发。 #### onCheckAll 点击全选或者调用 "checkall" 方法时触发。 #### onUncheckAll 点击全不选或者调用 "uncheckall" 方法时触发。 #### onOptgroupClick 点击分组时触发。 ```javascript onOptgroupClick: function(view) { /* view.label: the text of the optgroup view.checked: the checked of the optgroup view.children: an array of the checkboxes (DOM elements) inside the optgroup */ } ``` #### onClick 点击一个复选框时触发。 ```javascript onOptgroupClick: function(view) { /* view.label: the text of the checkbox item view.checked: the checked of the checkbox item */ } ``` ### Methods #### getSelects 获取 Multiple Select 选择内容。 参数: type 类型: string 选择内容的类型,value 或者 text。 默认值为 ```value```。 ``` javascript alert('Selected values: ' + $('select').multipleSelect('getSelects')); alert('Selected texts: ' + $('select').multipleSelect('getSelects', 'text')); ``` #### setSelects 设置 Multiple Select 的内容。 参数: values 类型: array 选择框的内容信息。 ``` javascript $('select').multipleSelect('setSelects', [1, 3]); ``` #### enable 启用 Multiple Select。 ``` javascript $('select').multipleSelect('enable'); ``` #### disable 禁用 Multiple Select。在这种模式下,不允许用户操作。 ``` javascript $('select').multipleSelect('disable'); ``` #### checkAll 全选所有的复选框。 ``` javascript $('select').multipleSelect('checkAll'); ``` #### uncheckAll 全不选所有的复选框。 ``` javascript $('select').multipleSelect('uncheckAll'); ``` #### refresh 重新加载 Multiple Select。 假如你是通过 AJAX 或者 DOM 来手动添加或者删除 option 选项,可以通过 refresh 方法来重新加载 Multiple Select。 ``` javascript $('select').multipleSelect('refresh'); ``` ## About [博客](http://wenzhixin.net.cn) [scutech](http://www.scutech.com) ## Acknowledgements © 2012-2014, Multiple Selected is licensed under the The MIT License. Coded by wenzhixin. 我的网站 ([wenzhixin.net.cn](http://wenzhixin.net.cn)) Github ([@wenzhixin](https://github.com/wenzhixin)) 微博 ([@_文翼_](http://weibo.com/2292826740)) 邮件 (wenzhixin2010@gmail.com)