jQuery和Bootstrap下拉多选框插件

 website 下载

插件介绍

一个jQuery插件，它将一个普通的选择框转换成一个用户友好的可过滤的多选下拉列表，用户可以通过选中复选框来选择一个或多个选项。

更多功能

1. 根复选框，允许您通过单击选择所有选项。

2. 支持Bootstrap 4框架。

3. 允许通过JavaScript将更多选项附加到select下拉列表中。

4. 键盘辅助功能。

5. 尤其适用于标签输入，使用户能够从预定义列表中选择标签。

兼容的浏览器

Chrome, IE9+, FireFox, Opera, Safari

使用方法

1. 在页面中加载jQuery库（必需）和bootstrap框架样式表（可选但推荐）。

<link rel="stylesheet" href="/path/to/cdn/bootstrap.min.css" />
<script src="/path/to/cdn/jquery.slim.min.js"></script>

2. 在页面中加载插件JavaScript和css样式表文件。

<link rel="stylesheet" href="filter_multi_select.css" />
<script src="filter-multi-select-bundle.min.js"></script>

3. 只需将函数filterMultiSelect附加到具有multiple属性的现有选择框，即可创建一个基本的可过滤多选择下拉列表：

<select multiple name="language" id="languages">
  <option value="js">JavaScript</option>
  <option value="html">HTML</option>
  <option value="css">CSS</option>
  ... more options here ...
</select>
const languages = $('#languages').filterMultiSelect();

4. 您还可以通过JavaScript向multielect下拉列表添加选项。

label: Lable text
value: Option value
selected: Is selected?
disabled: Is disabled?
const languages = $('#languages').filterMultiSelect({
      items: [
        ["Ruby","r"],
        ["C++","c",false,true]
      ],
});

5. 自定义多选下拉列表的可用选项。

const languages = $('#languages').filterMultiSelect({

      // displayed when no options are selected
      placeholderText: "nothing selected"

      // placeholder for search field
      filterText: "Filter"

      // Select All text
      selectAllText: "Select All",

      // determine if is case sensitive
      caseSensitive: false,

      // allows the user to disable and enable options programmatically
      allowEnablingAndDisabling: true
      
});

6. API方法。

// check is has an option
languages.hasOption(value);

// select/deselect an option
languages.selectOption(value:string);
languages.deselectOption(value:string);

// check if an option is selected
languages.isOptionSelected(value:string);

// select/deselect all non-disabled options
languages.selectAll();
languages.deselectAll();

// enable/disable an option
languages.enableOption(value:string);
languages.disableOption(value:string);

// check if an option is disabled
languages.isOptionDisabled(value:string);

// enable/disable the multiselect dropdown
languages.enable();
languages.disable();

// returns a JSON string of the selected options' values
languages.getSelectedOptionsAsJson(includeDisabled=true);