bootstrap风格的多选下拉框插件 bootstrap-multiselect

• 项目名称:bootstrap-multiselect
• 项目介绍:一款基于bootstrap的多选下拉框插件
• 项目地址：https://github.com/davidstutz/bootstrap-multiselect

1.资源引用

<!-- 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 type="text/javascript" src="js/bootstrap.min.js">

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

2.创建一个select

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

3.初始化插件

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

3.下拉框选择类型

• 1.单选下拉框不需要在select上添加multiple 默认即是单选
• 2.多选下拉框 select上增加multiple="multiple"属性

下拉菜单分组

只需将需要分组的option 使用group包裹即可

Option 1.1Option 1.2Option 1.3
Option 2.1Option 2.2Option 2.3

<select id="example-multiple-optgroups">
<optgroup label="Group 1" class="group-1">
<option value="1-1">Option 1.1<option value="1-2" selected="selected">Option 1.2<option value="1-3" selected="selected">Option 1.3</optgroup>
<optgroup label="Group 2" class="group-2">
<option value="2-1">Option 2.1<option value="2-2">Option 2.2<option value="2-3">Option 2.3</optgroup>
</select>

插件初始化参数

enableClickableOptGroups: true 选项分组的group可选，选中即选中分组下的所有成员

动态修改选中内容

['1', '2', '4']是个数组 为option的value

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