欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页  >  web前端

JS组件中bootstrap multiselect两大组件较量_javascript技巧

程序员文章站 2022-04-04 16:41:15
...
两个这种组件,大体样式和功能基本相同,本文就来带领大家看看这两个组件的用法。

一、组件说明以及API
1、第一个组件——multiple-select。这个组件风格简单、文档全、功能强大。但是觉得它选中的效果不太好。关于它的效果展示,我们放在后面。

2、第二个组件——bootstrap-multiselect。这个组件风格和第一个非常相似,文档也挺全面。

二、Multiple-select组件
1、组件说明
这个组件需要的浏览器支持如下:

  • IE 7+
  • Chrome 8+
  • Firefox 10+
  • Safari 3+
  • Opera 10.6+

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

2、效果预览
(1)原始的MultiSelect

JS组件中bootstrap multiselect两大组件较量_javascript技巧

(2)初始化的Multiple Select

JS组件中bootstrap multiselect两大组件较量_javascript技巧

JS组件中bootstrap multiselect两大组件较量_javascript技巧

JS组件中bootstrap multiselect两大组件较量_javascript技巧

(3)设置选中和禁用

JS组件中bootstrap multiselect两大组件较量_javascript技巧

(4)设置分组

JS组件中bootstrap multiselect两大组件较量_javascript技巧

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

JS组件中bootstrap multiselect两大组件较量_javascript技巧

(6)初始化成单选

JS组件中bootstrap multiselect两大组件较量_javascript技巧

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

JS组件中bootstrap multiselect两大组件较量_javascript技巧

JS组件中bootstrap multiselect两大组件较量_javascript技巧

3、代码示例
既然是bootstrap的组件,肯定需要bootstrap的支持。我们来看看需要引用的js

 @*Jquery*@
 

 @*bootstrap*@
 

 @*multiple-select*@
 

 @*页面js*@
 

(1)原始的初始化


      
$(function () {
 $('#sel_search_orderstatus').multipleSelect();
})

(2)设置选中和禁用


      
$(function () { $('#sel_search_orderstatus2').multipleSelect(); })

(3)设置分组和初始值


      
$(function () { $('#sel_search_orderstatus3').multipleSelect({ placeholder: "请选择" }); })

(4)单选


      
$(function () { $('#sel_search_orderstatus4').multipleSelect({ placeholder: "请选择", single: true }); })

(5)筛选


      
$(function () { $('#sel_search_orderstatus5').multipleSelect({ placeholder: "请选择", filter: true }); })

(6)如果你的multiple select不想要默认的初始值,可以在初始化的时候去设置他们的值。如下是源码里面的默认参数列表。

JS组件中bootstrap multiselect两大组件较量_javascript技巧

三、Bootstrap-multiselect组件
1、代码示例
初始化的过程和上面的类似,首先引用文件。

(1)最原始的初始化

 
      
$(function () { $('#sel_search_orderstatus').multiselect(); });

(2)设置选中和禁用


      

(3)分组


      
$(function () { $('#sel_search_orderstatus3').multiselect({ enableCollapsibleOptGroups: true }); });

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

以上就是两种多选组件的效果展示以及简单的代码示例。至于哪种更好全凭自己的感觉,使用起来都挺简单,功能基本类似,希望这篇文章对大家的学习有所帮助。