Bootstrap 4多选下拉框BsMultiSelect插件

Bootstrap 4多选下拉框BsMultiSelect插件

BsMultiSelect是一款基于Bootstrap 4的多选下拉框插件。该插件能够提供友好的多选功能,并提供一些情节模式和多种主题效果。

使用方法

安装:

1
npm install @dashboardcode/bsmultiselect

在页面中引入下面的文件。

1
2
3
4
5
6
7
8
<!-- Stylesheet -->
<link rel="stylesheet" href="bootstrap.min.css">
 
<!-- jQuery & Bootstrap -->
<script src="pathto//jquery-3.3.1.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="dist/js/BsMultiSelect.js"></script>

HTML结构

1
2
3
4
5
6
7
8
<select name="states" id="example" class="form-control"  multiple="multiple" style="display: none;">
  <option value="AL">Alabama</option>
  <option value="AK">Alaska</option>
  <option value="AZ">Arizona</option>
  <option value="AR">Arkansas</option>
  <option selected value="CA">California</option>
  ...
</select>

初始化插件

1
2
3
4
5
$(function(){
 
  $("select").dashboardCodeBsMultiSelect();
 
});

配置参数

可用的配置参数的默认值如下:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
$("select").bsMultiSelect({
  selectedPanelDefMinHeight: 'calc(2.25rem + 2px)',
  selectedPanelLgMinHeight: 'calc(2.875rem + 2px)',
  selectedPanelSmMinHeight: 'calc(1.8125rem + 2px)',
  selectedPanelDisabledBackgroundColor: '#e9ecef',
  selectedPanelFocusBorderColor: '#80bdff',
  selectedPanelFocusBoxShadow: '0 0 0 0.2rem rgba(0, 123, 255, 0.25)',
  selectedPanelFocusValidBoxShadow: '0 0 0 0.2rem rgba(40, 167, 69, 0.25)',
  selectedPanelFocusInvalidBoxShadow: '0 0 0 0.2rem rgba(220, 53, 69, 0.25)',
  filterInputColor: '#495057',
  selectedItemContentDisabledOpacity: '.65',
  dropdDownLabelDisabledColor: '#6c757d',
  containerClass: 'dashboardcode-bsmultiselect',
  dropDownMenuClass: 'dropdown-menu',
  dropDownItemClass: 'px-2',
  dropDownItemHoverClass: 'text-primary bg-light',
  selectedPanelClass: 'form-control',
  selectedItemClass: 'badge',
  removeSelectedItemButtonClass: 'close',
  filterInputItemClass: '',
  filterInputClass: ''
});
温馨提示:此处内容需要评论本文后才能查看。
2

发表评论