Bootstrap Multiselect插件使用步骤以及常见参数配置介绍
Multiselect是基于jQuery插件的，它可以以下拉列表的形式为用户提供选择内容，能进行单选或者多选。它应用的主要步骤如下：
一，引入需要的相关js和css文件
既然是Bootstrap插件，又是基于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>
<script type="text/javascript" src="js/bootstrap-multiselect.js"></script>
<link rel="stylesheet" href="css/bootstrap-multiselect.css" type="text/css"/>
二，创建一个下拉列表
创建的下拉列表格式如下：
<select id="test" multiple="multiple">
<option value="1">Cheese</option>
<option value="2">Tomatoes</option>
<option value="3">Mozzarella</option>
<option value="4">Mushrooms</option>
<option value="5">Pepperoni</option>
<option value="6">Onions</option>
</select>
三，应用这个插件
<script type="text/javascript">
$(document).ready(function() {
$('#test').multiselect();
});
</script>
得到的结果如下图所示：
这样就可以进行选择了。当然如果去掉属性multiple="multiple"，那么 就变成了一个单选的下拉列表
<script type="text/javascript">
$('#example-single').multiselect();
</script>
<!-- Note the missing multiple attribute! -->
<select id="example-single">
<option value="1">Option 1</option>
<option value="2">Option 2</option>
<option value="3">Option 3</option>
<option value="4">Option 4</option>
<option value="5">Option 5</option>
<option value="6">Option 6</option>
</select>
得到的效果如下：
以上这些是最基本的情况。如果想要深入的知道该如何应用，那么我们就需要知道它的一些相应的参数配置。
四，参数配置说明
1 multiple
当有这个属性的时候，下拉列表可以进行多选，反之，则只能进行单选
2enableClickableOptGroups
当配置这个属性后，则可以进行分类别或者说分组
只需要配置如下：
<script type="text/javascript">
$(document).ready(function() {
$('#example-enableClickableOptGroups').multiselect({
enableClickableOptGroups: true
});
});
</script>
注：example-enableClickableOptGroups表示的是，这个select的id。后面的亦然。
3 enableCollapsibleOptGroups
设置这个属性后，下拉列表就可以进行折叠使用。
需要配置为：
<script type="text/javascript">
$(document).ready(function() {
$('#example-enableClickableOptGroups').multiselect({
enableCollapsibleOptGroups: true
});
});
</script>
这个的话，用来设置下拉列表的最大高度，当超过这个最大高度的话，那么就会出现滚动条
5nonSelectedText 设置选择下拉列表的提示语
当下拉列表没有进行选择的时候，可以使用该属性来设置提示语。
例如上图中，设置提示语为Check an option!
6numberDisplayed 设置输入框中展示下拉列表中的内容个数
在这个插件里面，默认展示的个数是3
7enableFiltering 在下拉列表上设置一个搜索框
当设置enableFiltering 为true时，下拉列表会出现一个搜索输入框，能进行内容的搜索
8includeSelectAllOption 设置全选
9selectAllName 设置全选名 默认为select-all
8和9一般是联合起来使用，使用效果如下所示：
更多相关文章
- jsf中获取属性值的普通获取和jquery获取区别
- bootstrap-select js jQuery控制select属性变化
- JQUERY组装对象并调用自身函数改变自己的属性
- 单击列表项时如何编写内容？ [重复]
- 从下拉列表中获取复选框的值
- 使用表单字段值定制CSS属性。
- js获取html下拉框中选中值的自定义属性值
- 关于INPUT的autocomplete="off" 属性（浏览器表单默认的记忆功能）
- 9.1.4 前端 - HTML body标签 - 标题,段落,分割线,换行，特殊符号，列