bootstrap-dropselect是一款基于Bootstrap的仿Github样式实用下拉列表框插件。该下拉列表的插件功能类似于Github上的下拉列表框。它使用原生的Bootstrap dropdown改造而成，非常的实用和美观。

使用方法

HTML结构

该下拉列表框插件的HTML结构采用标准的Bootstrap dropdownHTML结构。

<div class="dropdown">
  <button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown">
    Dropdown
    <span class="caret"></span>
  </button>
  <ul id="dropselect-demo1" class="dropdown-menu">
    <li data-value="action_value"><a role="menuitem" tabindex="-1" href="#">Action</a></li>
    <li data-value="another_action"><a role="menuitem" tabindex="-1" href="#">Another action</a></li>
    <li data-selected="true"><a role="menuitem" tabindex="-1" href="#">Something else here</a></li>
    <li class="divider"></li>
    <li><a role="menuitem" tabindex="-1" href="#">Separated link</a></li>
  </ul>
</div>
初始化插件

在页面DOM元素加载完毕之后，通过jQuery获取<ul>元素，然后在它上面调用dropselect()方法。

$(function() {
  $('#dropselect-demo1').dropselect();
})

配置参数

下面是该下拉列表框的可用参数。

参数 类型 默认值 描述
multiselect boolean false 如果设置为true可以进行多选
clear mixed { show: true, label: 'Clear selected' } 可选项，允许清除项目。也可以传入布尔值true来使用它
filter mixed { show: true, placeholder: 'Search', casesensitive: false, noresult: 'No results found' } 可选项，使过滤文本框可用。也可以传入布尔值true来使用它
onclear callback clear事件触发时的回调函数
onselect callback select事件触发时的回调函数
onunselect callback unselect事件触发时的回调函数
ontoggle callback toggle事件触发时的回调函数
onchange callback change事件触发时的回调函数
icons boolean true 是否显示check图标
width mixed 300 下拉列表框的宽度
items mixed "markup" 默认的列表项

事件

事件 回调参数 描述
select object项 在选择一个列表项后触发
unselect object项 在取消选择一个列表项后触发
clear 在清除列表项后触发
toggle object项或boolean 当列表项切换时触发
change 当雷波县的状态改变时触发

方法

方法 参数 描述
toggle(index) 基于0开始的index 切换一个列表项的选择状态
clear 清空所有的选择项
select(index) 基于0开始的index 手动选择指定index的列表项
unselect(index) 基于0开始的index 手动取消选择指定index的列表项
showLoading 显示loading指示器
hideLoading 隐藏loading指示器
hide 完全隐藏下拉列表框
item 基于0开始的index 通过index获取列表项object对象。返回{ item: ITEM_VALUE, text: ITEM_TEXT, icon: DEFAULT_ITEM_ICON, $element: LI_ELEMENT }
destroy 销毁下拉列表框对象实例

应用举例

$(function() {
  var mydropselect = $('#my-dropselect').dropselect({
    filter: {
      show: true,
      placeholder: 'Search for an item'
    },
    multiselect: true
  });

  mydropselect.on('select', function(e, item) {
    console.log(item);
    console.log(e.selectedItem);
    // use e.selectedItems to get an array of selected items (useful for multiselect)
  });

  $('#clear-button').on('click', function() {
    mydropselect.dropselect('clear');
  })

  $('#toggle-item-3').on('click', function() {
    mydropselect.dropselect('showLoading');
    mydropselect.dropselect('toggle', 3);
  })
})