html下拉框 bootstrap样式,基于Bootstrap仿Github样式下拉列表框插件

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

使用方法

HTML结构

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

Dropdown

• Action
• Another action
• Something else here
• Separated link

初始化插件

在页面DOM元素加载完毕之后，通过jQuery获取

• 元素，然后在它上面调用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);

})

})