Bootstrap Multiselect 基本使用方法

简介

对比了不少的多选插件，因为项目基于Boostrap开发，最终选择：Bootstrap Multiselect

源码地址：
https://github.com/davidstutz/bootstrap-multiselect

示例网址：http://davidstutz.github.io/bootstrap-multiselect

使用指南

添加引用

因为该插件基于jQuery和Bootstrap，先引用；然后引用插件所需的js和css文件。

<!-- Include Twitter Bootstrap and jQuery: -->
<link rel="stylesheet" href="css/bootstrap.min.css" type="text/css"/>
<script type="text/javascript" src="js/jquery.min.js"></script>
<script type="text/javascript" src="js/bootstrap.min.js"></script>

<!-- Include the plugin's CSS and JS: -->
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>

创建选择Html代码

添加selectHtml代码，记住设置属性multiple="multiple"将其转换成多选。但是不用担心，不设置属性也可以正常使用，主要是为了保持html代码的一致性。

<!-- Build your select: -->
<select id="example-getting-started" multiple="multiple">
    <option value="cheese">Cheese</option>
    <option value="tomatoes">Tomatoes</option>
    <option value="mozarella">Mozzarella</option>
    <option value="mushrooms">Mushrooms</option>
    <option value="pepperoni">Pepperoni</option>
    <option value="onions">Onions</option>
</select>

调用插件

接下来只需要调用即可，示例使用默认方法，当然我们还可以设置更多的参数。

<!-- Initialize the plugin: -->
<script type="text/javascript">
    $(document).ready(function() {
        $('#example-getting-started').multiselect();
    });
</script>

参数设置

multiple
enableHTML
enableClickableOptGroups
enableCollapsibleOptGroups
disableIfEmpty
dropRight
dropUp
maxHeight
disableIfEmpty
disabledText
onChange
onInitialized
onDropdownShow
onDropdownHide
onDropdownShown
onDropdownHidden
buttonClass
inheritClass
buttonContainer
buttonWidth
buttonText
buttonTitle
nonSelectedText 没有选择项时显示的文本
nSelectedText 选择n选项时显示的文本
allSelectedText 选择全部项时显示的文本
numberDisplayed
delimiterText
optionLabel
optionClass
selectedClass
includeSelectAllOption
selectAllJustVisible
selectAllText
selectAllValue
selectAllName
selectAllNumber
onSelectAll
onDeselectAll
enableFiltering
enableCaseInsensitiveFiltering
enableFullValueFiltering
filterBehavior
filterPlaceholder

方法

• 销毁
  .multiselect(‘destroy’)

• 设置值
  .multiselect(‘select’, value)

示例：

$('#example-select').multiselect('select', ['1', '2', '4']);

• 获取值

  var selected = [];
  $(‘#Items option:selected’).each(function () {
  selected.push($(this).val());
  });

• 启用
  .multiselect(‘disable’)

• 禁用
  .multiselect(‘enable’)