帝国模板之家为广大用户提供专业、一站式建站服务。

网页特效

网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。

当前位置:首页 > 资源 > 网页特效 > 正文

jQuery和Bootstrap下拉多选框插件

帝国模板之家 2020-12-24 网页特效 评论

插件介绍

一个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);
这世上无忧无虑的人,反而相对寿命会长点。

已有 位小伙伴发表了看法

欢迎 发表评论

  • 匿名发表

关于

帝国cms模板

网页插件

帝国模板之家 | www.moyouyouw.cn

本站所有模板/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系站长删除,谢谢! 寻找帝国cms模板首选帝国模板之家,用心做站,上线至今广受好评,值得信赖!

  • 交流群1:帝国cms交流群1
  • 交流群2:帝国cms交流群2
在线QQ 给我留言