bootstrap-multiselect下拉框多选单选条件筛选_bootstrap-select实现下拉框加搜索资源-CSDN文库

共17个文件

js：5个

css：4个

less：2个

multiselect

条件检索

5星 · 超过95%的资源需积分: 50 54 浏览量 2018-07-19 17:37:58 上传评论收藏 197KB ZIP 举报

Bootstrap Multiselect是一款基于Bootstrap框架的插件，用于创建具有多选和单选功能的下拉框，同时提供了条件筛选的功能。这款插件极大地提升了用户在交互界面中的选择体验，尤其适用于需要用户从大量选项中进行选择的情况。接下来，我们将详细讨论这个插件的关键知识点。 1. **基本使用** Bootstrap Multiselect的使用首先需要引入Bootstrap的CSS和JS库，以及Bootstrap Multiselect的特定CSS和JS文件。在HTML结构中，你需要为普通的`<select>`元素添加`multiple`属性和`data-toggle="multiselect"`数据属性，以便该插件能够识别并转换为多选下拉框。 2. **初始化** 在JavaScript中，你需要通过调用`$('select').multiselect();`来初始化插件。这将把页面上的所有`<select>`元素转化为Bootstrap Multiselect组件。 3. **配置选项** Bootstrap Multiselect提供了许多可配置的选项，例如`includeSelectAllOption`(是否包含全选选项)，`selectAllText`(全选按钮的文字)，`nonSelectedText`(未选中任何选项时的提示文字)等。你可以根据需求调整这些选项来定制插件的行为。 4. **事件处理** 插件触发了一系列事件，如`onSelect`（当选项被选中时触发）、`onDeselect`（当选项被取消选中时触发）等。你可以通过监听这些事件来执行相应的业务逻辑。 5. **方法调用** 除了配置选项，还可以通过调用插件提供的方法来改变其状态，如`multiselect('select', value)`用于选中指定值的选项，`multiselect('deselect', value)`用于取消选中，`multiselect('refresh')`用于更新视图等。 6. **条件筛选** Bootstrap Multiselect支持在下拉框内实现条件检索，用户可以输入关键词来过滤显示的选项。这通常需要自定义代码来实现，可以通过监听`keyup`事件并更新`<option>`元素的可见性来达到目的。 7. **单选模式** 虽然插件默认支持多选，但你也可以通过设置`multiple`属性为`false`或者配置选项`enableClickableOptGroups`和`enableFiltering`来实现单选模式。 8. **分组和可选组** 如果选项有分组，可以使用`<optgroup>`标签。插件会自动处理这些分组，并且在多选模式下，可以选择整个分组。 9. **国际化** 对于非英语用户，Bootstrap Multiselect支持国际化，你可以提供本地化文件来改变按钮文本和其他提示信息的语言。 10. **自定义样式和模板** 如果需要更个性化的样式，可以通过覆盖插件的CSS类或者使用自定义模板来自定义下拉框的外观。 11. **与其他库的兼容性** 这个插件通常能很好地与其他前端框架和库（如jQuery、AngularJS等）配合使用，但需要注意潜在的冲突和调整。 12. **响应式设计** Bootstrap Multiselect是基于Bootstrap构建的，因此它天生具有一定的响应式能力，适应不同设备的屏幕大小。通过以上这些知识点，我们可以灵活地使用Bootstrap Multiselect来构建交互性更强的Web应用，为用户提供高效、友好的多选和单选操作体验。在实际开发中，要结合项目需求和用户习惯，适当调整和优化配置，以实现最佳效果。

资源推荐

资源详情

资源评论

收起资源包目录

项目下拉框检索多选单选.zip （17个子文件）

项目下拉框检索多选单选

moreSelectFilter.html 6KB

docs

less

bootstrap-example.less 1KB

css

prettify.min.css 627B

bootstrap-example.min.css 853B

bootstrap-3.3.2.min.css 114KB

fonts

glyphicons-halflings-regular.svg 106KB

glyphicons-halflings-regular.woff 23KB

glyphicons-halflings-regular.ttf 44KB

glyphicons-halflings-regular.woff2 18KB

glyphicons-halflings-regular.eot 20KB

bootstrap-3.3.2.min.js 35KB

prettify.min.js 13KB

require-2.3.5.min.js 17KB

jquery-2.1.3.min.js 82KB

dist

less

bootstrap-multiselect.less 4KB

css

bootstrap-multiselect.css 1KB

bootstrap-multiselect.js 67KB

<!DOCTYPE html> <html> <head> <title>Bootstrap Multiselect</title> <meta name="robots" content="noindex, nofollow" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8" /> <link rel="stylesheet" href="docs/css/bootstrap-3.3.2.min.css" type="text/css"> <link rel="stylesheet" href="docs/css/bootstrap-example.min.css" type="text/css"> <link rel="stylesheet" href="docs/css/prettify.min.css" type="text/css"> <script type="text/javascript" src="docs/js/jquery-2.1.3.min.js"></script> <script type="text/javascript" src="docs/js/bootstrap-3.3.2.min.js"></script> <script type="text/javascript" src="docs/js/prettify.min.js"></script> <link rel="stylesheet" href="dist/css/bootstrap-multiselect.css" type="text/css"> <script type="text/javascript" src="dist/js/bootstrap-multiselect.js"></script> <style> /* select -mul*/ /*自定义宽度*/ .myOwnDdl{ display:inline-block; width:100%; } /* 实现宽度自定义 */ .myOwnDdl .btn-group{ width:100%; } .myOwnDdl .multiselect { width:100%; text-align:right; margin-top:-5px; } .myOwnDdl ul { width:100%; } .myOwnDdl .multiselect-selected-text { position:absolute; left:0; right:25px; text-align:left; padding-left:20px; } /*控制隔行换色*/ .myOwnDll .multiselect-container li.odd { background: #eeeeee; } /*//控制select文本内容位置*/ .btn-group>.btn:first-child { margin-left: 0; padding-right: 90%; } /* select -mul end */ </style> <script type="text/javascript"> $(document).ready(function() { window.prettyPrint() && prettyPrint(); $("#moreSelect").multiselect({ //分别为控制下拉容器最大高度、最多允许具体展示选中项数（其余以数字形式展示）、隔行换色控制、全选、支持检索。 maxHeight:300, numberDisplayed:3, optionClass: function(element) { var value = $(element).parent().find($(element)).index(); if (value%2 == 0) { return 'even'; } else { return 'odd'; } }, includeSelectAllOption: true, enableFiltering: true, selectAllJustVisible: true, nonSelectedText: '请选项目', //默认展示文本 selectAllText: '全选' //全选文本 }); $('#radioSelect').multiselect({ enableFiltering: true, }); }); </script> </head> <body> <div class="form-group" > <label class="col-sm-4 control-label"><i class="required">* </i>项目多选：</label> <div class="col-sm-6"> <div class="myOwnDdl"> <select name="expendProject" id="moreSelect" class="form-control" multiple="multiple"> <option value="1">AAAAAAAA1</option> <option value="2">BBBBBBBB2</option> <option value="3">CCCCCCCC1</option> <option value="4">DDDDDDDD2</option> <option value="5">EEEEEEEE3</option> <option value="6">FFFFFFFF4</option> <option value="7">GGGGGGGG3</option> <option value="8">HHHHHHHH5</option> <option value="9">TTTTTTTT4</option> </select> </div> </div> </div> <div class="form-group" style="padding-top:110px"> <label class="col-sm-4 control-label"><i class="required">* </i>项目单选：</label> <div class="col-sm-6"> <div class="myOwnDdl"> <select name="expendProject" id="radioSelect" > <option value="1">AAAAAAAA1</option> <option value="2">BBBBBBBB2</option> <option value="3">CCCCCCCC1</option> <option value="4">DDDDDDDD2</option> <option value="5">EEEEEEEE3</option> <option value="6">FFFFFFFF4</option> <option value="7">GGGGGGGG3</option> <option value="8">HHHHHHHH5</option> <option value="9">TTTTTTTT4</option> </select> </div> </div> </div> </body> </html>

评论收藏

内容反馈