bootstrap multiselect下拉列表功能

2022-01-11,,,,

这篇文章主要为大家详细介绍了bootstrap multiselect下拉列表功能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下

bootstrap-multiselect基于原生态的下拉列表添加更多的功能及更好的视觉效果!

1、源码地址

https://github.com/davidstutz/bootstrap-multiselect

2、效果展示


3、代码示例

引入的js和css

 

实现代码

3.1、多选站点

   未排产已排产已锁定在制订单提交订单删除订单报废订单报废订单报废订单报废订单报废
 $(function () { $('#sel_search_orderstatus').multiselect({ includeSelectAllOption: true}); }); 

3.2、禁止和默认选中

   未排产已排产已锁定在制订单提交订单删除订单报废
 $(function () { $('#sel_search_orderstatus2').multiselect(); }); 

3.3、分组

    未排产 已排产已锁定在制订单提交 订单删除订单报废
 $(function () { $('#sel_search_orderstatus3').multiselect( ); }); 

3.4、单选项

  Option 1Option 2Option 3Option 4Option 5Option 6
 $('#example-single').multiselect(); 

3.5、搜索

  CheeseTomatoesMozzarellaMushroomsPepperoniOnions
 $(function () { $('#example-getting-started').multiselect({ includeSelectAllOption: true, enableFiltering: true }); }); 

默认无滚动条,请在bootstrap-multiselect.css中添加即可。

具体属性demo,源码解释的非常清楚,我就不列出来了。

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持本站。

以上就是bootstrap multiselect下拉列表功能的详细内容,更多请关注本站其它相关文章!

《bootstrap multiselect下拉列表功能.doc》

下载本文的Word格式文档,以方便收藏与打印。