【笔记】BootstrapMultiselect学习笔记

发表于 更新于 阅读次数：

前言

通过BootstrapMultiselect实现多选下拉列表

准备工作

引入依赖

1
2
3
4
5
6
7
8
<link rel="stylesheet" href="dist/css/bootstrap.css">
<link rel="stylesheet" href="dist/css/bootstrap-multiselect.css">

<script src="dist/js/jquery.js"></script>

<script src="dist/js/bootstrap.js"></script>
<script src="dist/js/bootstrap.bundle.js"></script>
<script src="dist/js/bootstrap-multiselect.js"></script>

HTML生成多选下拉列表

  • HTML将普通的下拉列表变成可以多选的下拉列表
1
2
3
<select class="form-control" id="select" multiple="multiple">
    <option value="1">One</option>
</select>

JS初始化多选下拉列表

1
$('#select').multiselect();

选项选中状态改变事件

1
2
3
4
5
$('#select').multiselect({
  onChange: function(option, checked, select) {
    ...
  }
});

完成

参考文献

Bootstrap Multiselect 中文网