将多选列表变成一个漂亮且易于使用的带有复选框的列表。
Posted
tags:
中文标题：将多选列表变成一个漂亮且易于使用的带有复选框的列表。 原文标题：Turn a multiselect list into a nice and easy to use list with checkboxes. 项目评级：Star:265 Fork:212 下载地址：https://github.com/nobleclem/jQuery-MultiSelect 详情介绍jQuery多选
将多选列表变成一个漂亮且易于使用的带有复选框的列表。这个插件只是本地选择列表元素的一个替代接口。当您在插件中选中一个选项时，该值将在本机列表中选择。这允许以表单形式提交值，也可以通过普通的POST/GET和javascript方法检索值。
支持
我只通过Github问题区域提供有限的支持。不要通过电子邮件、社交媒体或其他方式寻求支持。在打开新问题之前，还要检查已关闭的问题。
设计方法论
这个插件并不是一个功能齐全的多选插件。我认为这是一个多选插件，包含一组基本功能，开发人员可以使用回调来增强这些功能。正因为如此，我对添加功能犹豫不决，但愿意在有意义的地方添加回调。但是，如果你觉得大多数人都会从中受益，请随时打开一个问题并提出功能请求。
演示
http://springstubbe.us/projects/jquery-multiselect/
用法
// BASIC
$('select[multiple]').multiselect();
// 4 COLUMNS with custom placeholder text
$('select[multiple]').multiselect(
columns: 4,
texts:
placeholder: 'Select options'
);
// RELOAD multiselect (in case you modify options or selected options in the native select list since loading the plugin)
$('select[multiple]').multiselect('reload');
// DYNAMICALLY LOAD OPTIONS
$('select[multiple]').multiselect( 'loadOptions', [
name : 'Option Name 1',
value : 'option-value-1',
checked: false,
attributes :
custom1: 'value1',
custom2: 'value2'
,
name : 'Option Name 2',
value : 'option-value-2',
checked: false,
attributes :
custom1: 'value1',
custom2: 'value2'
]);
选项
<表格>
选项 值 默认 描述
s列表已关闭
方法
loadOptions（选项、覆盖、更新选择）
更新选择列表的选项。默认状态将用此列表替换现有列表。
这不会修改原始的选择列表元素
$('select[multiple]').multiselect( 'loadOptions', [
name : 'Option Name 1',
value : 'option-value-1',
checked: false
,
name : 'Option Name 2',
value : 'option-value-2',
checked: false
]);
设置
渲染后更新多选列表设置。它接受上面列出的相同选项。
这将为它引用的选择列表重新加载插件
$('select[multiple]').multiselect( 'settings', columns: 2 );
卸载
禁用jquery多选列表并显示本机选择列表。
这是破坏性的。您必须使用所有选项重新初始化才能为列表启用插件
$('select[multiple]').multiselect( 'unload' );
重新加载
这是一种快速卸载/加载，同时在插件初始化期间维护选项。
$('select[multiple]').multiselect( 'reload' );
重置
将元素重置回其默认选定值。
$('select[multiple]').multiselect( 'reset' );
使残废
禁用或启用选择列表。如果没有传递第二个参数，则假定为true。
$('select[multiple]').multiselect( 'disable', true );
$('select[multiple]').multiselect( 'disable', false );
回调
加载时
初始加载后激发并隐藏本机选择列表
onLoad( element )
元素：选择列表元素对象
on选项单击
单击选项后激发
onOptionClick( element, option )
元素：选择列表元素对象
选项：选项元素对象
打开控制
打开选项列表时激发
onControlOpen( element )
元素：选择列表元素对象
onControl关闭
关闭选项列表时激发
onControlClose( element )
元素：选择列表元素对象
on全选
单击（取消）全选时激发
onSelectAll( element, selected )
元素：选择列表元素对象
selected：选择的选项总数
on占位符
更新占位符txt时激发（仅在选定选项时激发）
onPlaceholder( element, placeholder, selectedOpts )
元素：选择列表元素对象
占位符：占位符元素对象
selectedOpts:所选选项
on搜索
在搜索选项之前激发
searchOptions.onSearch( element )
元素：选择列表元素对象
将多选列表框中的 SelectedItems 与 ViewModel 中的集合同步