天天看点

JS组件系列——两种bootstrap multiselect组件大比拼

这个组件需要的浏览器支持如下:

IE 7+

Chrome 8+

Firefox 10+

Safari 3+

Opera 10.6+

还好,一般主流的浏览器都能够支持。

 (1)原始的MultiSelect

JS组件系列——两种bootstrap multiselect组件大比拼

(2)初始化的Multiple Select

JS组件系列——两种bootstrap multiselect组件大比拼
JS组件系列——两种bootstrap multiselect组件大比拼
JS组件系列——两种bootstrap multiselect组件大比拼

(3)设置选中和禁用

JS组件系列——两种bootstrap multiselect组件大比拼

(4)设置分组

JS组件系列——两种bootstrap multiselect组件大比拼

(5)设置未选中的初始值:请选择

JS组件系列——两种bootstrap multiselect组件大比拼

(6)初始化成单选

JS组件系列——两种bootstrap multiselect组件大比拼

(7)设置组件的筛选功能

JS组件系列——两种bootstrap multiselect组件大比拼
JS组件系列——两种bootstrap multiselect组件大比拼

既然是bootstrap的组件,肯定需要bootstrap的支持。我们来看看需要引用的js

JS组件系列——两种bootstrap multiselect组件大比拼
JS组件系列——两种bootstrap multiselect组件大比拼

(1)原始的初始化

JS组件系列——两种bootstrap multiselect组件大比拼
JS组件系列——两种bootstrap multiselect组件大比拼

(2)设置选中和禁用

(3)设置分组和初始值

JS组件系列——两种bootstrap multiselect组件大比拼
JS组件系列——两种bootstrap multiselect组件大比拼

(4)单选

(5)筛选

(6)更多参数:如果园友们有兴趣,可以看看源码里面的所有参数,虽然没有中文详解,但是根据英文的大概意思就能知道是干什么用的,如果你的multiple select不想要默认的初始值,可以在初始化的时候去设置他们的值。如下是源码里面的默认参数列表。

JS组件系列——两种bootstrap multiselect组件大比拼

类型: boolean

是否打开下拉列表。

默认值为 <code>false</code>。

类型: string

显示默认的提示信息。

默认值为 <code>''</code>。

是否显示全选复选框。

默认值为 <code>true</code>。

全选复选框的显示内容。

默认值为 <code>Select all</code>。

是否在一行中显示多个选项。

类型: integer

一行中每个选项的宽度。

默认值为 <code>80</code>。

是否只允许你选择一行。

定义下拉列表的位置,只能是 <code>bottom</code> 或者 <code>top</code>。

默认值为 <code>bottom</code>.

是否开启过滤功能。

定义下拉列表的宽度。

默认值为 <code>undefined</code>。 默认与 select 的宽度相同。

下拉列表的最大高度。

默认值为 <code>250</code>。

当下拉列表被打开时触发。

当下拉列表被关闭时触发。

点击全选或者调用 “checkall” 方法时触发。

点击全不选或者调用 “uncheckall” 方法时触发。

点击分组时触发。

点击一个复选框时触发

获取 Multiple Select 选择内容。

参数: type

选择内容的类型,value 或者 text。

默认值为 <code>value</code>。

设置 Multiple Select 的内容。

参数: values

类型: array

选择框的内容信息。

启用 Multiple Select。

禁用 Multiple Select。在这种模式下,不允许用户操作。

全选所有的复选框。

全不选所有的复选框。

重新加载 Multiple Select。

假如你是通过 AJAX 或者 DOM 来手动添加或者删除 option 选项,可以通过 refresh 方法来重新加载 Multiple Select。

(1)最原始的样子

JS组件系列——两种bootstrap multiselect组件大比拼
JS组件系列——两种bootstrap multiselect组件大比拼
JS组件系列——两种bootstrap multiselect组件大比拼

(2)单选

JS组件系列——两种bootstrap multiselect组件大比拼

(3)默认选中和禁用

JS组件系列——两种bootstrap multiselect组件大比拼

(4)分组折叠和展开

JS组件系列——两种bootstrap multiselect组件大比拼
JS组件系列——两种bootstrap multiselect组件大比拼

(5)初始化控件选中和未选中的值

JS组件系列——两种bootstrap multiselect组件大比拼
JS组件系列——两种bootstrap multiselect组件大比拼

(6)搜索过滤功能

JS组件系列——两种bootstrap multiselect组件大比拼
JS组件系列——两种bootstrap multiselect组件大比拼

初始化的过程和上面的类似,首先引用文件。

JS组件系列——两种bootstrap multiselect组件大比拼
JS组件系列——两种bootstrap multiselect组件大比拼

(1)最原始的初始化

JS组件系列——两种bootstrap multiselect组件大比拼
JS组件系列——两种bootstrap multiselect组件大比拼
JS组件系列——两种bootstrap multiselect组件大比拼
JS组件系列——两种bootstrap multiselect组件大比拼

(3)分组

JS组件系列——两种bootstrap multiselect组件大比拼
JS组件系列——两种bootstrap multiselect组件大比拼

其他效果的代码就不一一展示了,代码很简单,看看文档基本没啥问题。

 以上就是两种多选组件的效果展示以及简单的代码示例。至于哪种更好全凭园友们自己的感觉,使用起来都挺简单,功能基本类似。

本文转自懒得安分博客园博客,原文链接:http://www.cnblogs.com/landeanfen/p/5013452.html,如需转载请自行联系原作者

继续阅读