网页特效栏目收集了最全最新的前端网页插件,包括最流行的jQuery,Bootstrap,Js,Css,Vue等主流特效插件。
一个jQuery插件,它将一个普通的选择框转换成一个用户友好的可过滤的多选下拉列表,用户可以通过选中复选框来选择一个或多个选项。
更多功能
根复选框,允许您通过单击选择所有选项。
支持Bootstrap 4框架。
允许通过JavaScript将更多选项附加到select下拉列表中。
键盘辅助功能。
尤其适用于标签输入,使用户能够从预定义列表中选择标签。
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);
转载请注明来源:jQuery和Bootstrap下拉多选框插件
本文永久链接地址:https://www.moyouyouw.cn/code/1033.html
郑重声明:本站所有主题/文章除标明原创外,均来自网络转载,版权归原作者所有,如果有侵犯到您的权益,请联系本站删除,谢谢!我们不承担任何技术及版权问题,且不对任何资源负法律责任。
上一篇
下一篇
已有 位小伙伴发表了看法
欢迎 你 发表评论