- 项目名称: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包裹即可
<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']);