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

根据LGPL-2.1许可证进行许可。

更多功能：

• 一个ROOT复选框，允许您通过单击选择所有选项。
• 与最新的Bootstrap 4兼容。
• 允许通过JavaScript将更多选项附加到选择下拉列表中。
• 键盘可访问性。
• 特别适合于使用户能够从预定义列表中选择标签的标签输入。

如何使用它:

1.在文档中加载jQuery库（必需）和Bootstrap的样式表（可选但推荐）。

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

2.在文档中加载过滤器多选插件的JavaScript和样式表。

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

3.通过简单地附加函数来创建一个基本的可筛选多选下拉列表过滤器多选到现有的选择框，并使用倍数属性：

<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将选项添加到多选下拉列表中。

• 标签：标签文本
• value：选项值
• selected：是否选中？
• 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",

      // Label text
      labelText: "",

      // the number of items able to be selected
      // 0 means no limit
      selectionLimit: 0,

      // 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);

更新日志：

v1.4.1 (2022-06-16)

• HTML根节点注释有以下属性之一：如果多选，则多选，无选择限制；multiple=“n”如果多选，选择限制为n；单选则单选。

v1.4.0 (2022-06-15)

• 使用参数selectionLimit限制选择的数量。
• 通过使用selectionLimit=1或省略multiple属性来创建单个选择。

v1.3.0 (2022-06-01)

• 显示内嵌下拉列表的标签。

v1.12 (2022-02-27)

• 当选择或取消选择某个选项时，监听要发出信号的事件。

v1.1.0 (2021-03-11)

• 附加类过滤器多选以选择元素，并使插件自动应用。
• 或者在$.fn.filterMultiSelect.selector中定义您自己的选择器。
• 访问插件在$.fn.filterMultiSelect.applied中应用的所有元素组。

关于作者：

作者：安德鲁

网站：https://github.com/andreww1011/filter-multi-select

预览截图

jQuery进行带筛选器和复选框 多选