Bootstrap Selection

基于Bootstrap.dropdown来制造的一个下拉多选控件
运用前需加载JQuery、Bootstrap库（款式和JS）另有underscore js。

假如不需要动态加载下拉项可不加载underscore js

例子

简朴运用

<div class="dropdown dropdown-checkbox" data-target="dropdown-checkbox">
    <a href="#" id="drop2" role="button" class="dropdown-checkbox-toggle dropdown-toggle" data-toggle="dropdown">星级 <b class="caret"></b></a>
    <ul class="dropdown-menu dropdown-checkbox-menu" role="menu" aria-labelledby="drop2">
        <li><label for="1" class="checkbox"><input id="1" name="star" type="checkbox" value="">五星</label></li>
        <!-- ... -->
        <li><label for="8" class="checkbox"><input id="8" name="star" type="checkbox" value="">经济型</label></li>
    </ul>
</div>

//简朴运用
$('#small-exp').selection();

动态加载

//数据源
var data = [
    {"id":1,"name":"star","content":"五星"},
    {"id":2,"name":"star","content":"准五星"},
    {"id":3,"name":"star","content":"四星"},
    {"id":4,"name":"star","content":"准四星"},
    {"id":5,"name":"star","content":"三星"},
    {"id":6,"name":"star","content":"准三星"},
    {"id":7,"name":"star","content":"二星"},
    {"id":8,"name":"star","content":"经济型"}
];
//动态加载例子
$('#small-exp').selection('source',data);

要领

显现（或隐蔽）下拉框
$('.dropdown-checkbox').selection('toggle')

全选
$('.dropdown-checkbox').selection('all')

反选
$('.dropdown-checkbox').selection('invert')

作废挑选
$('.dropdown-checkbox').selection('none')

获得题目
$('.dropdown-checkbox').selection('title')

设置题目
$('.dropdown-checkbox').selection('title','题目')

获得数据源
$('.dropdown-checkbox').selection('source')

设置数据源
$('.dropdown-checkbox').selection('source',{JSON})

获得一切下拉项的JQuery对象(就是一切checkbox)
$('.dropdown-checkbox').selection('items')

事宜

多选控件勾选后促发bs.selection.changed事宜。

$('.dropdown-checkbox').selection().on('bs.selection.changed',function(e,selection,$item){
    //...
});

其他

在dropdown-checkbox元素中设置以下data-属性会自动加载

 data-title='星级 <b class="caret"></b>'
 data-source='[{"id":1,"name":"star","content":"五星"},...,{"id":8,"name":"star","content":"经济型"}]'

获得每一个子项的数据源，条件是动态加载下拉的子项

$('.dropdown-checkbox').selection('items').each(function(){
    //数据保存在li上
    var data = $(this).parents('li').data('bs.selection.item.data');
});

细致参考：http://git.oschina.net/packy-tang/Bootstrap-Selection

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝［更新申明］＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

项目新版本已运用bower、gruntjs等管理工具重新打包，多谢列位关注。
因为我以为coding.net风趣一点，把项目迁移到coding了，地点以下：

https://coding.net/u/packy/p/Bootstrap-Selection/git