下拉多选框

来源：互联网发布：linux显示root密码编辑：程序博客网时间：2024/05/18 00:55

Bootstrap Selection Beta V0.1.1

基于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

0 0