【笔记】BootstrapMultiselect学习笔记

发表于 更新于 阅读次数：

前言

Bootstrap Multiselect is a JQuery based plugin to provide an intuitive user interface for using select inputs with the multiple attribute present. Instead of a select a bootstrap button will be shown w dropdown menu containing the single options as checkboxes.（Github）

通过davidstutz/bootstrap-multiselect实现多选下拉列表

引入依赖

1
2
3
4
5
6
<link rel="stylesheet" href="https://unpkg.com/bootstrap@5/dist/css/bootstrap.min.css">
<link rel="stylesheet" href="https://unpkg.com/bootstrap-multiselect@2/dist/css/bootstrap-multiselect.min.css">

<script src="https://unpkg.com/jquery@3/dist/jquery.slim.min.js"></script>
<script src="https://unpkg.com/bootstrap@5/dist/js/bootstrap.bundle.min.js"></script>
<script src="https://unpkg.com/bootstrap-multiselect@2/dist/js/bootstrap-multiselect.min.js"></script>

HTML生成多选下拉列表

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

初始化

1
$("#app").multiselect();

指定配置

配置事件

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

完成

参考文献

Bootstrap Multiselect 中文网