JS组件中自举多选两大组件较量

两个这种组件，大体样式和功能基本相同，本文就来带领大家看看这两个组件的用法。

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

2、第二个组件——引导-多选。这个组件风格和第一个非常相似，文档也挺全面。

二、多选组件1、组件说明这个组件需要的浏览器支持如下：

IE 7 Chrome 8火狐10 Safari 3 Opera 10.6还好，一般主流的浏览器都能够支持。

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

(2)初始化的多重选择

(3)设置选中和禁用

(4)设置分组

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

(6)初始化成单选

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

3、代码示例既然是引导程序的组件，肯定需要引导程序的支持。我们来看看需要引用的射流研究…

@ * Jquery * @ script src=' http : ~/Scripts/Jquery-1。10 .2 .量滴js '/script @ * bootstrap * @ script src=' http : ~/Content/bootstrap/js/bootstrap。量滴js ' ~/Content/bootstrap/CSS/bootstrap。量滴CSS ' rel='样式表/@ *多选* @脚本src=' http 3360 ~/Content/multi select _ wenzhixix页面js * @ script src=' http : ~/Scripts/Home/Index _ wenzhixin。js '/脚本(1)原始的初始化

label class=' control-label col-xs-1 '用于=' sel _ search _ order status '多选站点/label div class=' col-xs-2 ' style=' margin-top :7 px；'select id=' sel _ search _ order status ' style=' width :150 px ' multiple=' multiple '选项值='0 '未排产/option选项值='5 '已排产/option选项值='10 '已锁定/option选项值='25 '在制/option选项值='20 '订单提交/option选项值='30 '订单删除/option选项值='50 '订单报废/option/select/div $(function(){ $(' # sel _ search _ order status ').multipleSelect()；})(2)设置选中和禁用

标签类='控制-标签栏-xs-1 '对于='sel_search_orderstatus2 '已禁用选择/标签差异类='col-xs-2 '样式='页边距-顶部：7 px'select id=' sel _ search _ order status 2 ' style=' width :150 px ' multiple=' multiple './select/div $(function(){ $(' # sel _ search _ order status 2 ').multipleSelect()；})(3)设置分组和初始值

label class=' control-label col-xs-1 '用于=' sel _ search _ orderstatus 3 '分组/label div class=' col-xs-2 ' style=' margin-top :7 px；'select id=' sel _ search _ order status 3 ' style=' width :150 px ' multiple=' multiple ' opt group label='未上线选项值='0 '未排产/option /optgroup optgroup标签='已上线选项值='5 '已排产/option选项值='10 '已锁定/option选项值='25 '在制/option选项值='20 '订单提交/option /optgroup optgroup标签='异常选项值='30 '订单删除/option选项值='50 '订单报废/option/opt group/select/div $(function(){ $(' # sel _ search _ order status 3 ')).多重选择({占位符： '请选择' });})(4)单选

label class=' control-label col-xs-1 '用于=' sel _ search _ orderstatus 4 '单选/label div class=' col-xs-2 ' style=' margin-top :7 px；'select id=' sel _ search _ order status 4 ' style=' width :150 px ' multiple=' multiple './select/div $(function(){ $(' # sel _ search _ order status 4 ').多重选择({占位符： '请选择，单：真})；})(5)筛选

label class=' control-label col-xs-1 '用于=' sel _ search _ orderstatus 5 '筛选/label div class=' col-xs-2 ' style=' margin-top :7 px；'select id=' sel _ search _ order status 5 ' style=' width :150 px ' multiple=' multiple './select/div $(function(){ $(' # sel _ search _ order status 5 ').多重选择({占位符： '请选择，filter : true })；})(6)如果你的多重选择不想要默认的初始值，可以在初始化的时候去设置他们的值。如下是源码里面的默认参数列表。

三、自举多选组件1、代码示例初始化的过程和上面的类似，首先引用文件。

script src=' http : ~/Scripts/jquery-1。10 .2 .量滴js '/script script src=' http : ~/Content/bootstrap/js/bootstrap。量滴js '/脚本链接href=' ~/Content/bootstrap/CSS/bootstrap。量滴CSS ' rel='样式表/script src=' http 3360 ~/Content/multi select _ davidstutz/js/bootstrap-multi select。js '/脚本链接.最原始的初始化

label class=' control-label col-xs-1 '用于=' sel _ search _ order status '多选站点/label div class=' col-xs-2 ' style=' margin-top :7 px；'select id=' sel _ search _ order status ' style=' width :150 px ' multiple=' multiple '选项值='0 '未排产/option选项值='5 '已排产/option选项值='10 '已锁定/option选项值='25 '在制/option选项值='20 '订单提交/option选项值='30 '订单删除/option选项值='50 '订单报废/option/select/div $(function(){ $(' # sel _ search _ order status ').多选();});(2)设置选中和禁用

标签类='控制-标签栏-xs-1 '对于='sel_search_orderstatus2 '已禁用选择/标签差异类='col-xs-2 '样式='页边距-顶部：7 px'select id=' sel _ search _ order status 2 ' style=' width :150 px ' multiple=' multiple '选项值='0 '未排产/option选项值='5 '选定='选定'已排产/option选项值='10 '选定='选定'已锁定/option选项值='25 '已禁用='已禁用'在制/option选项值='20 '已禁用='已禁用'订单提交/option选项值=' 30 '禁用='禁用'选定='选定'订单删除/option选项值='50 '订单报废/option /select /div(3)分组

label class=' control-label col-xs-1 '用于=' sel _ search _ orderstatus 3 '分组/label div class=' col-xs-2 ' style=' margin-top :7 px；'select id=' sel _ search _ order status 3 ' style=' width :150 px ' multiple=' multiple ' opt group label='未上线选项值='0 '未排产/option /optgroup optgroup标签='已上线选项值='5 '已排产/option选项值='10 '选定='选定'已锁定/option选项值='25 '已禁用='已禁用'在制/option选项值='20 '订单提交/option /optgroup optgroup标签='异常选项值='30 '订单删除/option选项值='50 '订单报废/option/opt group/select/div $(function(){ $(' # sel _ search _ order status 3 ')).多选({ enablecollapsibletopgroups 3360 true })；});其他效果的代码就不一一展示了，代码很简单，看看文档基本没啥问题。

如果大家还想深入学习，可以点击这里进行学习，再为大家附两个精彩的专题：引导学习教程引导程序实战教程

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